# Quiz 5 Vue 3 Fundamentals

Please complete the following tasks in a Vue 3 application to build a functional **Book Manager** component.

---

Given the following book array,

```javascript
[
  {
    id: "b1",
    title: "1984",
    author: "George Orwell",
    year: 1949,
    genres: ["Fiction", "Dystopia"],
  },
  {
    id: "b2",
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    year: 1925,
    genres: ["Fiction", "Tragedy"],
  },
  {
    id: "b3",
    title: "Sapiens: A Brief History of Humankind",
    author: "Yuval Noah Harari",
    year: 2011,
    genres: ["History"],
  },
  {
    id: "b4",
    title: "Educated",
    author: "Tara Westover",
    year: 2018,
    genres: ["Memoir"],
  },
  {
    id: "b5",
    title: "Moby Dick",
    author: "Herman Melville",
    year: 1851,
    genres: ["Fiction", "Adventure"],
  },
  {
    id: "b6",
    title: "Brave New World",
    author: "Aldous Huxley",
    year: 1932,
    genres: ["Fiction", "Dystopia"],
  },
];
```

1. Create a `Book.vue` component that receives the following properties:
   - `title` (string)
   - `author` (string)
   - `year` (number)
   - `genres` (array of strings)

   - The component should display the title, author, year, and genres.

2. Display Books Using `v-for` in `App.vue`

   In `App.vue`, define a list of books using the provided array. Use the `Book.vue` component created in Q1 to display each book using `v-for`.

3. Filter Fiction Books

   In `App.vue`, add a checkbox that allows users to toggle between showing only Fiction books and all books. You can choose any method or approach to implement this functionality. The goal is to ensure that the list of books updates dynamically based on whether the "Show Fiction Only" option is selected.

Test your solutions on [play.vuejs.org](https://play.vuejs.org/#eNp9kD0PgjAQhv8Kudmw6MSmhkEHNerYhZQTi6Vt+oEkhP9uWwI6GLbL+7yXPHc9bJVKW4eQAazAGirFg1VpbaTwUU9EkhCgslGMoz4ry6QwBLIkksAKzuX7GDOrHa6mnD6Rvv7ktelCRuCi0aBukcDMbKErtCPObyfs/DzDRpaO+/YCvKKR3AXHsbZzovTaP71oe2iU1JaJ6m7yzqIw01FBNDSH2Cfg/7JfOP2ru043cY+IAYYPKNBtWQ==):