Trying to use localStorage to persist form data

I have the following:

let form = useForm({
  name: '',
  email: '',
  mobile: '',
  dob: dateOfBirth,
  line1: '',
  line2: '',
  city: '',
  county: '',
  postcode: '',
  profile: '',
  company_name: '',
  start_month: 'Month',
  start_year: 'Year',
  end_month: 'Month',
  end_year: 'Year',
  exp_decription: '',
})

onBeforeMount(() => {
   const data = localStorage.getItem('cvData')
    if(data !== null) {
      form = null
      form = useForm(JSON.parse(data))
    }
})

onMounted(() => {
    getMonths()
    getYears()

    watch(form, _.debounce(() => {
        persistLocalStorage()
    }, 500), { deep: true })

})

However this kinda works but I get;

Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

How would one achieve such a task so if theres localStorage persists but also a watcher to update the form from child components?