Managing Django CSRF Protection Flow Between Django and Vue

I'm using Django Rest Framework. In my login_view I created a csrf token and set it as cookie. I examined the login response and I can see it is properly set as Set-Header token. Let me summarize my problems:

1-) For a subsequent user request I couldn't set the cookie as axios header since document.cookie is resulting empty in the Vue side. As a result, Im getting error as the rest framework pushes for csrf validation and csrf middleware fails to compare cookie with the request header.

2- I'm not sure if the problem related to that I'm testing this on my localhost.

3-) I'm not sure if I carry the csrf framework correctly.

The following is summary of my code

from django.middleware.csrf import get_token
class user_login(APIView):
def post(self, request):
response = Response()
...
csrf_token = get_token(request)
response.set_cookie(
key='csrftoken',
value=csrf_token,
httponly=False,
secure=False,
samesite='None',
)
...
return response

In the Vue side:

axios.defaults.headers.common['X-CSRFToken'] = getCookie('csrftoken');
axios
.post(
user_request,
{
user_data: user_data,
},
{
withCredentials: true
}

And the getCookie function is implemented as depicted in Django documentation:

const getCookie = function(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

No matter what I tried the document.cookie is empty.