feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard

- Implement dynamic styles and event handling in Vue2 with a card component.
- Create lifecycle methods exercise to simulate async data loading and instance destruction.
- Develop a component communication exercise with props, events, and slots.
- Build a comprehensive course management dashboard with filtering, statistics, and component interactions.

07-vue2/05-computed-and-watch/answer.js

@@ -0,0 +1,30 @@
+new Vue({
+  el: "#app",
+  data: {
+    keyword: "",
+    courses: [
+      { id: 1, title: "Vue 实例入门" },
+      { id: 2, title: "Vue 指令系统" },
+      { id: 3, title: "组件通信实战" },
+    ],
+  },
+  computed: {
+    filteredCourses() {
+      const value = this.keyword.trim().toLowerCase();
+
+      if (!value) {
+        return this.courses;
+      }
+
+      return this.courses.filter((item) => item.title.toLowerCase().includes(value));
+    },
+    matchedCount() {
+      return this.filteredCourses.length;
+    },
+  },
+  watch: {
+    keyword(newValue) {
+      console.log("关键字变化：", newValue);
+    },
+  },
+});