<p dir="auto">I found this <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="82877775" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/1655" data-hovercard-type="issue" data-hovercard-url="/babel/babel/issues/1655/hovercard" href="https://github.com/babel/babel/issues/1655">#1655</a> but it was closed without a real answer and it links to a <a href="https://gist.github.com/jeffmo/054df782c05639da2adb">spec doc</a> that people ask about it in the comments but I do not see anyone answering why it's omitted in the spec.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const first = Symbol();
const second = Symbol();

class Foo {
  // This works
  [first]() {}
  // This does not
  [second] = {};
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">first</span> <span class="pl-c1">=</span> <span class="pl-v">Symbol</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">second</span> <span class="pl-c1">=</span> <span class="pl-v">Symbol</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Foo</span> <span class="pl-kos">{</span>
  <span class="pl-c">// This works</span>
  <span class="pl-kos">[</span><span class="pl-s1">first</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
  <span class="pl-c">// This does not</span>
  <span class="pl-kos">[</span><span class="pl-s1">second</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="repl: Unexpected token (6:11)
  4 | class Foo {
  5 |   [first]() {}
&gt; 6 |   [second] = {};
    |            ^
  7 | }"><pre class="notranslate"><code class="notranslate">repl: Unexpected token (6:11)
  4 | class Foo {
  5 |   [first]() {}
&gt; 6 |   [second] = {};
    |            ^
  7 | }
</code></pre></div>
<p dir="auto"><a href="https://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;playground=true&amp;code=const%20first%20%3D%20Symbol%28%29%3B%0Aconst%20second%20%3D%20Symbol%28%29%3B%0A%0Aclass%20Foo%20%7B%0A%20%20%5Bfirst%5D%28%29%20%7B%7D%0A%20%20%5Bsecond%5D%20%3D%20%7B%7D%3B%0A%7D&amp;stage=0" rel="nofollow">REPL</a></p>
<p dir="auto">Cc/ <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jeffmo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jeffmo">@jeffmo</a></p>
<p dir="auto">The class property names can only be identifiers while the name of the methods can also be declared with ["name-of-method"] syntax. Should the two specifications be consistent?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class A {
    [&quot;my-property&quot;] = 5; // Not valid syntax
    [&quot;my-method&quot;]() {  } // Valid syntax
}"><pre class="notranslate"><code class="notranslate">class A {
    ["my-property"] = 5; // Not valid syntax
    ["my-method"]() {  } // Valid syntax
}
</code></pre></div>