Vue 3, setting value when prop changes, am I doing this right?

I want to set an input to a value when a prop changes, but I don't want to v-model it because I don't want the top level value to change (it could lead to invalid values being set)

Am I correct to use a watcher in this case?

export default {template: `
        <div
            class="bg-slate-700 text-white p-2 ml-4 border border-slate-200 border border-slate-900 w-[200px] rounded-lg">

            <h3 class="text-lg text-center font-bold">Shifts</h3>

            <div class="p-2 bg-slate-800 rounded-lg items-center flex justify-between">
                <label for="nwd">Non-Working Day</label>
                <div class="checkbox-wrapper">
                    <input type="checkbox" class="checkbox-toggle" id="nwd" name="nwd">
                </div>
            </div>

            <form method="post" @submit.prevent="updateShifts">
                <div class="text-center bg-slate-800 mt-2 rounded-lg">
                    <span>Shift 1</span>

                    <div class="flex items-center justify-between pb-2 px-4">
                        <input name="shift1_start"
                               class="text-gray-900 w-[54px] px-1 text-center rounded border-2 border-gray-500 bg-white inline-flex items-center justify-center invalid:border-red-500 disabled:bg-slate-400 disabled:text-slate-800"
                               pattern="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
                               maxlength="5"
                               :value="date.base_shift1_start" /> <!-- here -->
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" class="bg-orange-500 px-2 py-1 mt-2 rounded-lg text-white">Save</button>
                </div>
            </form>
        </div>
    `,

    props: {
        dates: [Object, null]
    },

    data(){
        return {
            date: this.dates[0]
        }
    },

    watch: {
        dates: {
            handler(newValue, oldValue) {
                this.date = newValue[0];
                console.log(newValue[0]);
            }
        }
    },

    methods: {
        updateShifts() {
            console.log(this.dates[0]);
        }
    }
}