Vue template内でのthisのスコープについて

問題：v-bindの代入の仕方で:name=this.idとするとradioの挙動がおかしくなる

radioのコンポーネントを作っていたのですが、template内で、v-bindの代入でthis.変数名で記述すると、正常に動かないという現象が起きました。下記がコードです。

components/MyRadios.vue

<template>
  <div>
    <p>:name=this.id</p>
    <label v-for="item in myoptions" :key="item.id">
        <input type="radio" :name="this.id" :value="item.id">
        {{ item.name }}
    </label>
    <p>:name=id</p>
    <label v-for="item in myoptions" :key="item.id">
      <input type="radio" :name="id" :value="item.id">
      {{ item.name }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      required: true
    },
    myoptions: {
      type: Array,
      required: true
    },
  }
};
</script>

結果が下記のスクリーンショットなのですが、なぜか :name=this.id とすると、radioボタンを両方選べるようになってしまいました。。

template内ではthisを使ってはいけない

template内のthisを使ったときに挙動が変わるということらしく、Vue.jsのtemplate内ではthisを使わないほうがいいとの回答でした。（どなたか「なぜtemplate内ではthisを使ってはいけないのか」理由をご存知の方がいらっしゃいましたら良かったら教えてください。。。。）

前提条件

package.json

{
  "name": "codesandbox",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.22"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.6.0",
    "@vue/cli-plugin-eslint": "3.6.0",
    "@vue/cli-service": "3.6.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": ["plugin:vue/essential", "eslint:recommended"],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
}

以上です。