fix: watch newTodoTitle in CreateTodoForm.vue

Author: r-toki

src/components/CreateTodoForm.vue

@@ -1,34 +1,53 @@
 <template>
-  <form @submit.prevent="onSubmit">
+  <form @submit.prevent="handleSubmitNewTodo">
     <input
       type="text"
       placeholder="Add new todo"
       required
       class="form-control px-5 py-4"
-      v-model.trim="title"
+      v-model.trim="state.title"
     />
   </form>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref } from "vue";
+import { defineComponent, PropType, reactive, watch } from "vue";
 
-export type HandleSubmitNewTodo = (title: Ref<string>) => void;
+export type HandleSubmitNewTodo = () => void;
+
+type State = {
+  title: string;
+};
 
 export default defineComponent({
   props: {
+    newTodoTitle: {
+      type: String as PropType<string>,
+      required: true
+    },
     handleSubmitNewTodo: {
       type: Function as PropType<HandleSubmitNewTodo>,
       required: true
     }
   },
 
-  setup(props) {
-    const title: Ref<string> = ref("");
-    const onSubmit = () => {
-      props.handleSubmitNewTodo(title);
-    };
-    return { title, onSubmit };
+  emits: ["update:newTodoTitle"],
+
+  setup(props, context) {
+    const state = reactive<State>({ title: props.newTodoTitle });
+    watch(
+      () => props.newTodoTitle,
+      newValue => {
+        state.title = newValue;
+      }
+    );
+    watch(
+      () => state.title,
+      newValue => {
+        context.emit("update:newTodoTitle", newValue);
+      }
+    );
+    return { state };
   }
 });
 </script>

src/pages/Index.vue

@@ -2,6 +2,7 @@
   <div class="container" style="width: 480px">
     <CreateTodoForm
       class="my-3"
+      v-model:new-todo-title="state.newTodoTitle"
       :handle-submit-new-todo="handleSubmitNewTodo"
     />
     <TodoList
@@ -17,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { defineComponent, reactive, Ref, ref } from "vue";
 import CreateTodoForm from "@/components/CreateTodoForm.vue";
 import TodoList from "@/components/TodoList.vue";
 import useTodos from "@/composables/use-todos";
@@ -33,15 +34,22 @@ import type {
   HandleSubmitEditedTodo,
 } from "@/components/EditTodoForm.vue";
 
+type State = {
+  newTodoTitle: string,
+}
+
 export default defineComponent({
   components: { CreateTodoForm, TodoList },
 
   setup() {
     const { todos, createTodo, updateTodo, removeTodo } = useTodos();
+    const state = reactive<State>({
+      newTodoTitle: ''
+    })
 
-    const handleSubmitNewTodo: HandleSubmitNewTodo = (title) => {
-      createTodo({ title: title.value, completed: false });
-      title.value = "";
+    const handleSubmitNewTodo: HandleSubmitNewTodo = () => {
+      createTodo({ title: state.newTodoTitle, completed: false });
+      state.newTodoTitle = "";
     };
 
     const todoIdBeingEdited: Ref<string | null> = ref(null);
@@ -66,6 +74,7 @@ export default defineComponent({
     };
 
     return {
+      state,
       handleSubmitNewTodo,
 
       todos,