How to one-way bind a bunch of inputs to a master input in Vue3?

Question

Let's say I have a master HTML <input> element:

<template>
  <input
    id="tax_master"
    max="100"
    min="0"
    type="number"
    v-model="taxDefault"
  />
</template>

<script>
  const taxDefault = ref(13)
</script>

And some number of children <input> elements:

<template>
  <input
    id="tax_0"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage0"
  />
  <input
    id="tax_1"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage1"
  />
  <input
    id="tax_2"
    max="100"
    min="0"
    type="number"
    v-model="taxPercentage2"
  />
</template>

<script>
  const taxPercentage0 = ref(taxDefault)
  const taxPercentage1 = ref(taxDefault)
  const taxPercentage2 = ref(taxDefault)
</script>

If working properly, the value of taxDefault appears on page load in all inputs, which works. Then, the user can either change the master input to modify all children inputs, or change individual children inputs without changing the master input.

The above code is how I've been trying this. However, the value of taxDefault is binded to the value of each children element for some reason, so on change of children, taxDefault changes, and all children naturally change too. I need the children inputs to be independent of each other, and the master to be independent of the children. The only dependency should be the children changing on change of the master input.

I have tried using :value instead of v-model for the children, but I can't wrap my head around this issue.

Answer 1

if a ref wraps a ref(ref(taxDefault)), vue will direct return the inside ref, its means ref(taxDefault) === taxDefault ,so I use the watchEffect to change the children when the parent changes.

import { ref, watchEffect } from 'vue';
const taxDefault = ref(13)
const taxPercentage0 = ref()
const taxPercentage1 = ref()
const taxPercentage2 = ref()
watchEffect(()=>{
    taxPercentage0.value=taxDefault.value
    taxPercentage1.value=taxDefault.value
    taxPercentage2.value=taxDefault.value
})