crear un templateview en el modelo persona 

views.py

class PersonListView(TemplateView):
    template_name='persona/lista.html'

tambien agregar lo siguiente

class PersonSearchAPIView(ListAPIView):
    serializer_class=PersonSerializer

    def get_queryset(self):
        #filtramos datos
        kword=self.kwargs['kword']
        return Person.objects.filter(
            full_name__icontains=kword
        )

 

urls.py

    path(
        'lista/',
        views.PersonListView.as_view(),
        name='lista'
    ),

tambien esta parte

    path(
        'api/persona/search/<kword>/',
        views.PersonSearchAPIView.as_view(),
        name='personasapisearch'
    ),

 

en la carpeta static/apps

search.js

new Vue({
  el: 'app',
  delimiters: ['{$', '$}'],

  //
  mounted() {
    var self = this;
    // cargamos lista de personas
    axios.get('/api/persona/lista/')
      .then(function (response) {
        self.listaPersonas = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    buscar_persona: function(kword){
      var self = this;
      axios.get('/api/persona/search/' + kword + '/')
        .then(function (response) {
          self.listaPersonas = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  watch: {
    kword: function (val) {
      var self = this;
      self.buscar_persona(val)
    },
  },
  data: {
    listaPersonas:[],
    kword:'',
  },
})

en el template/persona

base_persona.html

{% extends "base.html" %}

{% load  static %}

{% block css %}
{% endblock css %}

{% block js %}
<!-- ========== importando vue y axios [ASI ES MALA PRACTICA]========== -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- ==========seccion codigo vuejs========== -->
<script src="{% static 'apps/search.js' %}"></script>
<!-- ==========Fin seccion codigo vuejs========== -->
{% endblock js %}

lista.html

<!-- head para PC -->
{% extends "persona/base_persona.html" %}

{% load  static %}

{% block content %}

<div class="grid-container" style="padding: 5em;">
    <div class="grid-x grid-margin-x align-center">
        <div class="cell large-5">
            <h3 class="cell">Personas en la agenda</h3>
            <app>
                <div class="grid-x grid-margin-x">
                    <div class="cell" v-model="kword">
                        <input type="text" v-model="kword" placeholder="buscar..">
                    </div>
                    <div class="cell">
                        <ul class="vertical menu">
                            <li v-for="persona in listaPersonas">
                                <a href="#">{$ persona.full_name $}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </app>
        </div>
    </div>
</div>

{% endblock content %}

resultado