Using the v-radio-group component does not echo the data problem

There is a v-radio-group component:

<v-radio-group v-model=“mdl.affinity”>
  <v-radio label="0">不设置</v-radio>
  <v-radio label="1">硬亲和性</v-radio>
  <v-radio label="2">软亲和性</v-radio>
  <v-radio label="3">硬反亲和性</v-radio>
  <v-radio label="4">软反亲和性</v-radio>
<v-tooltip class="store-tooltip" :content="tipNodesStore" placement="right">
  <v-icon type="question-circle-o"></v-icon>
</v-tooltip>
</v-radio-group>

defined in data:

data() {
  return {
    mdl: {
      clusterId:'',
      affinity:'0'
    }
  }
}

Created to get the data passed from the parent page:

props: {
    item: {
        type: Object,
        default: {}
    }
},
created() {
  let _this = this;
  _this.mdl = _this.item;
  console.log(_this.mdl);
}

The log shows that the data has been assigned successfully:

 But the page doesn't echo the data:

 So to find the reason, there may be several reasons why the v-radio-group component on the page is not displayed in the selected state:

1. Two-way binding problem: Make sure that v-model="mdl.affinity" is correctly bound to this.mdl.affinity. Check the this.mdl and this.item objects to make sure they are correctly declared in the Vue component's data, and the affinity property in this.item has been correctly assigned.
2. Value type matching problem: ensure that the value type of this.mdl.affinity is consistent with the value type of the label attribute of the v-radio component. If the label value is a string type, make sure this.mdl.affinity is also a string type. If the label value is a numeric type, make sure that this.mdl.affinity is also a numeric type, and the value matches.
3. Life cycle timing problem: If this.mdl has been assigned a value when the page starts, but the rendering of the v-radio-group component occurs after the created phase, then the initial value may not be passed to the component correctly. Try to move the relevant code to the mounted or updated life cycle hook function to ensure that the value of this.mdl has been assigned when the component is rendered.

After investigating the cause, the problem was found

The item.affinity value passed from the parent page is a numeric type, but I defined it as a string type, so I changed it to a numeric type.

And the inexplicable v-tooltip component will not be displayed when it is placed in v-radio-group, and it will be displayed when it is moved outside; the data attribute is used to initialize the rendering radio item.

The last modified code:

<v-radio-group v-model="mdl.affinity" :data="dataAffi"></v-radio-group>
          <v-tooltip class="store-tooltip tooltip-question" :content="tipNodesStore" placement="right">
            <v-icon type="question-circle-o"></v-icon>
          </v-tooltip>

data() {
  return {
    mdl: {
      clusterId: '',
      affinity: 0
    },
    dataAffi: [
     {value: 0, text: '不设置'},
     {value: 1, text: '硬亲和性'},
     {value: 2, text: '软亲和性'},
     {value: 3, text: '硬反亲和性'},
     {value: 4, text: '软反亲和性'},
   ]
  }
}

The page is echoed successfully.