Django-Vue get_absolute url error on template - django

Question

I am trying to route my Vue home page to the detail page of the specific product with its url when the button is clicked on.
Though my django and vue servers run fine. I get this error in chrome.
Chrome error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get_absolute_url')
at Proxy.render (HomeView.vue?43d0:14:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:893:1)
...
The error only shows up when I add the router link tag with the product.get_absolute_url method. When I take it off, the product items (latestProducts) render fine.
HomeView.vue
<template>
<div class="home">
<div class="product-container">
<div
class="product-item"
v-for="product in latestProducts"
:key="product.id"
>
<img class="prod-img" :src="product.get_image" alt="" />
<h2>{{ product.name }}</h2>
<p>{{ product.price }}</p>
</div>
<div>
<router-link v-bind:to="product.get_absolute_url"
><button>View Item</button></router-link
>
</div>
</div>
<router-view />
</div>
</template>
Here is my models.py file where the get_absolute_url model is defined.
class Product(models.Model):
category = models.ForeignKey(Category, related_name='products', on_delete=models.CASCADE)
name = models.CharField(max_length=255)
slug = models.SlugField()
description = models.TextField(blank=True, null=True)
price = models.DecimalField(max_digits=6, decimal_places=2)
image = models.ImageField(upload_to='uploads/', blank=True, null=True)
thumbnail = models.ImageField(upload_to='uploads/', blank=True, null=True)
date_added = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ('name',)
def __str__(self):
return self.name
def get_absolute_url(self):
return f'/{self.category.slug} / {self.slug }/'
I have read the django docs that suggest using the reverse() function and the viewname in the views.py to route to the url. But i don't think that would work because I am using the APIView of the rest_framework.
Here is my views.py file:
class ProductDetail(APIView):
def get_object(self, category_slug, product_slug):
try:
return Product.objects.filter(category_slug=category_slug).get(slug=product_slug)
except Product.DoesNotExist:
raise Http404
def get(self, request, category_slug, product_slug, format=None):
product = self.get_object(category_slug, product_slug)
serializer = ProductSerializer(product)
return Response(serializer.data)
I would like to know how to clear this error and/or resources to help understand the url and routing concept better.