Как реализовать поисковый фильтр vue.js в шаблоне Django

Question

Здесь я реализую поисковый фильтр vue.js в своем шаблоне приложения django.Я пробовал следующий код, но он не работает.Как я могу это сделать ??

vue.js

new Vue ({
      el: '#app',
      delimiters: ['[[', ']]'],
      data: {
        search: '',
        List : [
        {% for item in items %}
          {
            "id" : "{{ item.id }}",
           "name":  " {{ item.name }} "
          },

        {% endfor %} 
    ]
      },
      computed: {
        filteredProducts() {
          // var lowerTitle = product.title.toLowerCase();
          return this.List.filter((list) => {
            return list.name.toLowerCase().match(this.search);
          });
        }
      }
    })

template

<div id="app">
      <div class="search-wrapper">
        <input type="text" v-model="search" placeholder="Search title.."/>

      </div>
      <div class="wrapper">
        <div class="card" v-for="item in filteredList" :key="list.id">

            [[ item.name ]]


          </a>
        </div>
      </div>
    </div>