Load Local Geojson Data with Leaflet and Vue.js - vue.js

Question

I am displaying in my Vue.js a leaflet Map with Geojson Data.
var map = L.map('map').setView([13.82, 106.62], 5);
// load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 6
}).addTo(map);
// The rodents json data need to be replace by a proper HTTPS not local Server
map.setZoom(4);
$.getJSON("C:\Users\simon\Desktop\FE\data\heat.geojson",function(data){
var locations = data.features.map(function(gps) {
// the heatmap plugin wants an array of each location
var location = gps.geometry.coordinates.reverse();
location.push(1.0);
return location; // e.g. [50.5, 30.5, 0.2], // lat, lng, intensity
});
var heat = L.heatLayer(locations, { radius: 25, maxOpacity: .8, scaleRadius: false, valueField: 'total',
// gradient: {
// 0.0: 'green',
// 0.5: 'yellow',
// 1.0: 'red'
// }
});
map.addLayer(heat);
});
On a local browser, I will simply load the data from the file location and it will work. How can I load the data in my local vue.js application?\
If i Change path to : HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - http://localhost:8082/pages/..FE/data/sales_vietnam_heat.geojson