Vue.jsでdisbledの状態でラジオボタンの状態がcssで反映されない

Question

<div id="conent">
    <dl>
        <dt>1<sup>&lowast;</sup></dt>
        <dd style="display:flex">
            <input type="radio"  v-model='abc' name="abc" id="abc1" class="abc"  value="1">
            <label for="abc1" id="abc1" style="flex-basis: 50%"  class="abc">
                利用する</label>
            <input type="radio"  v-model='abc' name="abc" id="abc2" value="0">
            <label  for="abc2"  id="abc2">利用しない</label></dd>
        <dt>2<sup>&lowast;</sup></dt>
        <dd style="display:flex">
            <input type="radio"  v-model='dfg' name="dfg" :disabled="abcd !==0"  id="dfg1" class="dfg"  value="1">
            <label for="dfg1" id="dfg1" style="flex-basis: 50%"  class="dfg">
                利用する</label>
            <input type="radio"  v-model='dfg' name="dfg" :disabled="abcd !==0"  id="dfg2" value="0">
            <label  for="dfg2"  id="dfg2">利用しない</label>
        </dd>
 </dl>
</div>

new Vue({
  el: '#conent',
  data: {
    value:'',
    abc: '',
		dfg: '',
    abcd: '',

　},
  watch: {
    abc: function (newValue, oldValue) {
      console.log(newValue);
	  if (newValue == "1") (this.abcd = 0)
	  if (newValue == "0"){ 　
          this.abcd = 1
          　this.is_user_online_medical1 = false
			}
    }
  }
})

上記のように1の時に利用しないになると、２のラジオボタンが押せなくなる仕様はできたのですが、css上のchecedが外せずどのようにしたらいいのでしょうか？