问题描述：

如何在点击提交之后，清空input框内的内容，我通过给inputValue.value重新赋值为空，发现并没有作用

相关代码：

<script>
    //关于inputValue操作的内容进行了封装
    const inputReactiveEffect = () => {
        const {
            ref
        } = Vue;
        const inputValue = ref("");
        const handleInputValueChange = (e) => {
            // console.log(e.target.value);
            inputValue.value = e.target.value;
        };
        return {
            inputValue,
            handleInputValueChange
        }
    }

    //关于list操作的内容进行了封装
    const listReactiveEffect = () => {
        const { inputValue } = inputReactiveEffect();
        const {
            ref,
            reactive
        } = Vue;
        const list = reactive([]);
        //增加数据
        const addItemToList = (item) => {
            list.push(item);
            inputValue.value = "";
            console.log(list);
        }
        //删除数据
        const handleDataDeletion = (index) => {
            list.splice(index, 1);
        }
        return {
            list,
            addItemToList,
            handleDataDeletion
        }
    }

    const app = Vue.createApp({
        setup(props, context) {
            //流程调度中转
            const {
                list,
                addItemToList,
                handleDataDeletion
            } = listReactiveEffect();
            const {
                inputValue,
                handleInputValueChange
            } = inputReactiveEffect();

            return {
                inputValue,
                handleInputValueChange,
                list,
                addItemToList,
                handleDataDeletion
            }
        },
        template: `
            <div>
                <div>
                    <input :value="inputValue" @input="handleInputValueChange"
                        @keydown.enter="()=>addItemToList(inputValue)" />
                    <button @click="()=>addItemToList(inputValue)">提交</button>
                </div>
                <ul>
                    <li v-for="(item,index) in list" :key="index" @click="handleDataDeletion(index)">{{item}}</li>
                </ul>    
            </div>
        `
    })
    const vm = app.mount('#root');
</script>