Javascript Vue3合成API.来自本地存储的对象始终返回UNDEFINED

我使用的是Vue3组合API.基本上，我try 从存储在本地存储中的对象获取数据，但我总是收到未定义的数据，即使它确实100%存在.

错误是:"Uncaught (in promise) TypeError: $setup.habits.value is undefined"

我的本地存储对象:habits:"[{"habitName":"Dance","completedDates":["2023-12-27","2023-12-26","2023-12-28"]},{"habitName":"Act","completedDates":["2023-12-28"]}]"

引用从本地存储获取项目的习惯变量.以下是我的组件:

import { ref, nextTick, watchEffect } from 'vue'
import AddHabit from '../components/EditHabits/AddHabit.vue'


let habits = ref(JSON.parse(localStorage.getItem('habits')))

let editingHabit = ref()

watchEffect(() => {
    habits.value = JSON.parse(localStorage.getItem('habits'))
})

const editHabit = async (habit) => {
    editingHabit.value = habit

    await nextTick()
    const inputField = document.getElementById(habit.habitName)
    inputField.focus()
    inputField.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            const index = habits.value.findIndex(h => h.habitName === habit.habitName) 
            
            habits.value[index].habitName = editingHabit.value.habitName
            localStorage.setItem('habits', JSON.stringify(habits.value))
            
            editingHabit.value = null
            
        }
    })
}


</script>

<template>
    <div>
        <h4>Your Current Habits: </h4>
        <div id="total-habits" v-if="habits.value.length">
            <div class="dropdown" v-for="habit in habits.value" :key="habit.habitName">
                <p id="habitEntry" v-if="editingHabit.value !== habit"> {{ habit.habitName }}</p>
                <input :id="habit.habitName" v-else v-model.lazy="editingHabit.value.habitName" type="text">                
                <div class="dropdown-content">
                    <div @click="editHabit(habit)">Edit</div>
                    <div>Pause</div>
                    <div>Delete</div>
                </div>
            </div>
            
        </div>
        <div v-else>No Habits Yet!</div>
        
        
        <h4>Hover on a habit to edit it!</h4>
    </div>
    
    <AddHabit/>
</template>```