GeoLocation can't pass coordinates to another variable - vue.js

Question

So i would like to pass latitude and longitude to width and height variables in "data()", instead of just writing it in html.
I tried to pass variable through all these functions to have access to variable but this doesn't worked in function showLocation(location).
<template>
<div class="app">
<div class="app-Inner">
</div>
<button #click="getLocation">VIEW YOUR LOCATION</button>
<div>{{ width }}</div>
<div class="location"></div>
<div class="map"></div>
</div>
</template>
<script>
import Home from './components/Home.vue';
import MainValues from './components/MainValues.vue';
import Form from './components/Form.vue';
import More from './components/More.vue';
export default {
name: 'App',
data() {
return {
width: 0,
height: 0,
};
},
methods: {
getLocation() {
const geo = navigator.geolocation;
if (geo) {
// eslint-disable-next-line
geo.getCurrentPosition(showLocation);
} else {
const divLocation2 = document.querySelector('.location');
divLocation2.innerHTML = 'error';
}
function showLocation(location) {
// edit: !!!
// here instead of sending location cords through innerHTML i
// want to assign them into variables "width" and "height" which
// are defined in "data()" function above.
// tried: this.width = location.coords.latitude, and
// also : this.length = location.coords.longitude
// !!!
const divLocation = document.querySelector('.location');
divLocation.innerHTML = `${location.coords.latitude} ${location.coords.longitude}`;
}
},
},
};
</script>