Проблема с отображением страницы с подробной информацией о контакте - Django и Vuejs

Я пытаюсь научиться использовать vuejs в проекте django (я не использую DRF), и у меня возникли проблемы с настройкой url для отображения детального представления страницы.

На данный момент я настроил urls.py так, как показано ниже:

app_name = 'contacts'

urlpatterns = [
    path('', views.contacts_all, name='contacts_all'),
    path('<int:contact_id>/', views.contact_details, name='contact_details'),
]

Также у меня есть views.py, как показано ниже:

def contacts_all(request):
    # Check if an Ajax Request
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        contacts = list(Contact.objects.values())
        return JsonResponse(contacts, safe=False, status=200)
    return render(request, 'contacts/all-contacts.html')


def contact_details(request, contact_id):
    contact_detail = get_object_or_404(Contact, id=contact_id)

    context = {
        'contact_detail': contact_detail
    }
    return render(request, 'contacts/contact-detail.html', context)

Также я успешно получил все контакты с сервера django:

<script>
    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#contact-app',
        data: {
            contacts: [],
        },
        
        methods: {
            // Get all contacts from server
            async getContacts(){
                const response = await axios({
                    url: 'http://127.0.0.1:8000/contacts/', 
                    method: 'get',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(response => {
                    console.log(response.data);
                    this.contacts = response.data
                }).catch(err => {
                    console.log(err)
                });
            },
        },
        async created(){
            await this.getContacts();
        }
    });
</script>

А в шаблоне я успешно отображаю все данные контактов, как показано ниже:

<div class="flex-row-fluid ml-lg-8 d-block" id="contact-app">
    <div class="card card-custom card-stretch">
        <div class="card-body table-responsive px-0">
            <div 
                class="list list-hover min-w-500px"
                data-inbox="list"
                v-if="contacts.length"
            >
                <div 
                    class="d-flex align-items-start list-item card-spacer-x py-3"
                    data-inbox="message"
                    v-for="contact in contacts"
                    v-bind:key="contact.id"
                >
                    <div class="d-flex align-items-center">
                        <div class="d-flex align-items-center flex-wrap w-xxl-200px mr-3" data-toggle="view">
                            <a
                                href="#" 
                                class="font-weight-bold text-dark-75 text-hover-primary">
                                [[ contact.name ]]
                            </a>
                        </div>
                    </div>
                    <div class="flex-grow-1 mt-2 mr-2" data-toggle="view">
                        <div>
                            <a href="{% url 'contacts:contact_details' contact.id %}"> 
                                <span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
                                <span class="text-muted mr-10">[[ contact.message.substring(0, 100) ]]</span>
                            </a>        
                        </div>
                    </div>
                    <div class="mt-2 mr-3 text-right" data-toggle="view">[[ contact.date_sent| fromNow ]]</div>
                </div>
            </div>
            <div v-else>
                <center>
                    <span>{% trans 'No contacts' %}</span>
                <center>
            </div>
        </div>
    </div>
</div>

Я настроил url для получения страницы подробностей, но получил ошибку при получении страницы подробностей Reverse for 'contact_details' with arguments '('',)' not found. Проверен 1 шаблон(ы): ['contacts/(?P<contact_id>[0-9]+)/\Z']

<div>
  <a href="{% url 'contacts:contact_details' contact.id %}"> 
    <span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>

Благодарю за любую помощь.

<div>
  <a href="{% url 'contacts:contact_details' contact.id %}"> 
    <span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>

<div>
  <a v-bind:href="'http://127.0.0.1:8000/contacts/' + contact.id"> 
    <span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>