Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

[Vue 警告]: 親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロパティを直接変更することは避けてください。代わりに、プロパティの値に基づいてデータまたは計算プロパティを使用してください。変更されるプロパティ: "value"

Vue.component("RxSelect", {
 モデル： {
 プロパティ: "値",
 イベント: "変更",
 },
 小道具: {
 値: [数値、文字列],
 地図: 地図、
 },
 テンプレート: `
  <選択
   v-model="値"
   @change="$emit('change', 値)"
  >
   <オプション
   v-for="マップ内の[k,v]"
   :値="k"
   :key="k"
   >{{v}}</オプション>
  </選択>
  `、
});

<メインid="アプリ">
 現在選択されている性別は: {{map.get(sex)}} です
 <div>
 <rx-select :map="マップ" v-model="性別" />
 </div>
</メイン>

新しいVue({
 el: "#app",
 データ： {
 マップ: 新しい Map().set(1, "機密").set(2, "男性").set(3, "女性"),
 性別: "",
 },
});

Vue.component("RxSelect", {
 モデル： {
 プロパティ: "値",
 イベント: "変更",
 },
 小道具: {
 値: [数値、文字列],
 地図: 地図、
 },
 データ（） {
 戻る {
  内部値: this.value、
 };
 },
 時計：
 値(val) {
  this.innerValue = val;
 },
 内部値(val) {
  this.$emit("change", val);
 },
 },
 テンプレート: `
 <v-model="innerValue" を選択">
 <オプション
  v-for="マップ内の[k,v]"
  :値="k"
  :key="k"
 >{{v}}</オプション>
 </選択>
 `、
});

Vue.component("RxSelect", {
 モデル： {
 プロパティ: "値",
 イベント: "変更"、
 },
 小道具: {
 値: [数値、文字列],
 地図: 地図、
 },
 計算: {
 内部値: {
  得る（） {
  this.value を返します。
  },
  設定(値) {
  this.$emit("change", val);
  },
 },
 },
 テンプレート: `
 <v-model="innerValue" を選択">
 <オプション
  v-for="マップ内の[k,v]"
  :値="k"
  :key="k"
 >{{v}}</オプション>
 </選択>
 `、
});