Vue.jsではプロパティ名の重複に気を付けたほうが良さそう

# 結論
Vue.jsではプロパティ名の重複に気を付けたほうが良さそうだと調査をして感じました。

# 前提
- `props`、`data`、`computed`、`methods`などがこの後出てきます。が、これらの意味・役割についてはこの記事では解説しません。ご了承願います。
- この記事ではCDN の Vue を使用しています。
- vue@3.3.4を使用しています

# 要点
:::note info
- Vue.jsでテンプレート構文にプロパティをバインドしたいとき、バインドしたいプロパティ名を指定します。
- 「プロパティを持てるものたち(`props`、`data`…)」のいずれかが持っているプロパティであれば、そのプロパティ名をバインドしたいものとして指定できます。
- 「プロパティを持てるものたち(`props`、`data`…)」がそれぞれ持っているプロパティ名に重複がある場合、重複のあったプロパティ名を指定したとき、そのどれか1つのプロパティとバインドするものと考えられます。
- 裏を返せば、重複のあったプロパティ名を指定したとき、バインドできないプロパティが存在すると考えられます。
- つまり、プロパティ名の重複には気を付けたほうが良さそうという考えに至りました。
:::

# 解説
### テンプレート構文にプロパティをバインド
Vue.jsで、テンプレート構文にプロパティをバインドしたいときです。そのときはプロパティ名を指定してバインドします。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="abQQzaX" data-user="kabuto64425" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabuto64425/pen/abQQzaX">
  Untitled</a> by kabuto64425 (<a href="https://codepen.io/kabuto64425">@kabuto64425</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 指定するプロパティ名
この、指定するプロパティ名についてです。これは「プロパティを持てるものたち(`props`、`data`…)」のいずれかが持っているプロパティであれば、その名を指定することができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyQgrMJ" data-user="kabuto64425" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabuto64425/pen/dyQgrMJ">
  vueのプロパティ実験</a> by kabuto64425 (<a href="https://codepen.io/kabuto64425">@kabuto64425</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 名前が重複すると
上記のように、いずれかが持っているプロパティであれば、その名を指定できます。ここで、「もし、いずれかの持っているプロパティ名に重複があればどうなってしまうのか」と思ったわけです。実際に、`props`、`data`、`computed`、`methods`全てに`hoge`を持たせてみます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poQQvBL" data-user="kabuto64425" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabuto64425/pen/poQQvBL">
  Untitled</a> by kabuto64425 (<a href="https://codepen.io/kabuto64425">@kabuto64425</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

結果、`data`の`hoge`がバインドされました。このことから、どれか1つのプロパティとバインドするものと考えられます。

# 考察
上記の結果から、重複のあったプロパティ名を指定したとき、そのどれか1つのプロパティとバインドすることが考えられます。裏を返せば、重複のあったプロパティ名を指定したとき、バインドできないプロパティが存在すると考えられます。
つまり、名前の重複があると、意図しない挙動を起こすことがあるなと思ったので、プロパティ名の重複には気を付けたほうが良いと考察した次第です。

# おわりに
Vue.jsについて、調査を始めて間もない私が調査の末に出した考察であった点、ご承知いただければと思います。

以上です。

# 参考

https://ja.vuejs.org/guide/essentials/application.html

https://ja.vuejs.org/guide/essentials/component-basics.html

https://ja.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions

https://qiita.com/TomK/items/7e97fdc9abae387d364f

https://qiita.com/flat-ito/items/a4e1756666cfaa5c7789