fix: TODO list (#279)

* Vue公式の説明では、属性ではなくプロパティと表現しているので、プロパティに修正

* fix: v-slotの省略記法の間違いを修正

* ogImage true追加

* fix: Fix typo

Author: kokoe

content/ja/09.workspace/01.todo-list/.template/files/app.vue

@@ -24,7 +24,7 @@ const todos = ref<Todo[]>([
 ])
 const showUnDoneOnly = ref(false)
 const isCreateModalOpen = ref(false)
-const inputTitile = ref('')
+const inputTitle = ref('')
 const inputNote = ref('')
 const inputDate = ref('')
 
@@ -56,7 +56,7 @@ function handleSubmit(e: Event) {
   const newTodo: Todo = {
     id: Date.now(),
     done: false,
-    title: inputTitile.value,
+    title: inputTitle.value,
     note: inputNote.value,
     dueDate: inputDate.value,
   }
@@ -123,7 +123,7 @@ interface Todo {
         <form @submit="handleSubmit">
           <div>
             <label for="title">タイトル</label>
-            <input id="title" v-model="inputTitile" type="text" required>
+            <input id="title" v-model="inputTitle" type="text" required>
           </div>
 
           <div>

content/ja/09.workspace/01.todo-list/06.v-model/index.md

@@ -1,3 +1,7 @@
+---
+ogImage: true
+---
+
 # フォーム入力バインディング
 
 Vueでは [`v-model`](https://ja.vuejs.org/api/built-in-directives.html#v-model) ディレクティブを使うことで、フォーム要素やコンポーネントと「双方向データバインディング」を簡潔に実現できます。ユーザーの入力とVueのデータが常に同期され、フォーム制御が直感的になります。
@@ -32,11 +36,11 @@ Vueでは [`v-model`](https://ja.vuejs.org/api/built-in-directives.html#v-model)
 <input v-model="text" type="text" />
 ```
 
-フォームタイプごとにバインドされる属性やイベントが異なります：
+フォームタイプごとにバインドされるプロパティやイベントが異なります：
 
-- テキスト・テキストエリア：`value` 属性と `input` イベント
-- チェックボックス・ラジオ：`checked` 属性と `change` イベント
-- セレクトボックス：`value` 属性と `change` イベント
+- テキスト・テキストエリア：`value` プロパティと `input` イベント
+- チェックボックス・ラジオ：`checked` プロパティと `change` イベント
+- セレクトボックス：`value` プロパティと `change` イベント
 
 例えば、テキストエリア、ラジオボックス、セレクトボックスでは、このように使います：
 

content/ja/09.workspace/01.todo-list/07.reactivity-2/index.md

@@ -1,3 +1,7 @@
+---
+ogImage: true
+---
+
 # リアクティビティー パート２
 
 [リアクティビティー パート１](reactivity-1)で、データの変更を監視して、変更時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) の`ref`について学習しました。

content/ja/09.workspace/01.todo-list/08.componentization-3/index.md

@@ -1,3 +1,7 @@
+---
+ogImage: true
+---
+
 # コンポーネントの v-model
 
 [フォーム入力バインディング](v-model)で紹介したように、 `v-model` はフォーム入力欄とVueのデータを自動で同期してくれる仕組みです。

content/ja/09.workspace/01.todo-list/09.slot/index.md

@@ -1,3 +1,7 @@
+---
+ogImage: true
+---
+
 # スロット
 
 [スロット](https://ja.vuejs.org/guide/components/slots.html#slot-content-and-outlet) は、親コンポーネントから子コンポーネントの特定の場所にテンプレートを差し込むための仕組みです。
@@ -115,7 +119,7 @@
 
 名前付きのスロットコンテンツを渡すためには、 `v-slot` を利用します。（例: `<template v-slot:title>`）
 
-`v-slot` は `#` で省略表記ができます。（例: `<template #:title>`）
+`v-slot` は `#` で省略表記ができます。（例: `<template #title>`）
 
 ```vue
 <!-- AppModal: 子コンポーネント -->
@@ -151,7 +155,7 @@
     <form>
       <div>
         <label for="title">タイトル</label>
-        <input id="title" v-model="inputTitile" type="text" required>
+        <input id="title" v-model="inputTitle" type="text" required>
       </div>
     </form>
   </AppModal>
@@ -174,7 +178,7 @@
       <form>
         <div>
           <label for="title">タイトル</label>
-          <input id="title" v-model="inputTitile" type="text" required>
+          <input id="title" v-model="inputTitle" type="text" required>
         </div>
       </form>
     </template>

content/ja/09.workspace/01.todo-list/10.retrospective/.template/solutions/app.vue

@@ -24,7 +24,7 @@ const todos = ref<Todo[]>([
 ])
 const showUnDoneOnly = ref(false)
 const isCreateModalOpen = ref(false)
-const inputTitile = ref('')
+const inputTitle = ref('')
 const inputNote = ref('')
 const inputDate = ref('')
 
@@ -56,7 +56,7 @@ function handleSubmit(e: Event) {
   const newTodo: Todo = {
     id: Date.now(),
     done: false,
-    title: inputTitile.value,
+    title: inputTitle.value,
     note: inputNote.value,
     dueDate: inputDate.value,
   }
@@ -123,7 +123,7 @@ interface Todo {
         <form @submit="handleSubmit">
           <div>
             <label for="title">タイトル</label>
-            <input id="title" v-model="inputTitile" type="text" required>
+            <input id="title" v-model="inputTitle" type="text" required>
           </div>
 
           <div>

content/ja/09.workspace/01.todo-list/10.retrospective/index.md

@@ -1,3 +1,7 @@
+---
+ogImage: true
+---
+
 # 復習・まとめ
 
 TODOリストの作成を通して学べる、基本的なVue.jsの機能の説明は以上になります。
@@ -33,7 +37,7 @@ function handleSubmit(e: Event) {
   const newTodo: Todo = {
     id: Date.now(),
     done: false,
-    title: inputTitile.value,
+    title: inputTitle.value,
     note: inputNote.value,
     dueDate: inputDate.value
   }