Combining v-for with Vue's reactive computed properties

Demonstrate how to render a list based on a computed property that reacts to changes in the data.
    <!-- Loop through the computed property 'filteredItems' using v-for -->
      <li v-for="item in filteredItems" :key="">
        {{ }}
This part contains the Vue template with an unordered list (ul). The v-for directive is used to loop over the items of the 'filteredItems' computed property, rendering each 'item' as a list element (li).
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  name: 'ItemList',
  setup() {
    // Reactive data property
    const items = ref([
      { id: 1, name: 'Item 1', category: 'A' },
      { id: 2, name: 'Item 2', category: 'B' },
      { id: 3, name: 'Item 3', category: 'A' }

    // Reactive computed property that filters the items by a certain category
    const filteredItems = computed(() => {
      return items.value.filter(item => item.category === 'A');

    // Expose to the template
    return {
This script section of the Vue component defines the reactive data properties and computed properties. In the setup function, 'items' is a reactive array of objects. 'filteredItems' is a computed property based on 'items', which automatically updates when 'items' changes. It filters for items with category 'A' and is made available to the template for rendering.