I cannot change local json file in runtime - vue.js

Question

I want to use a local json file in my app. I simply import it and use without any problem in development. But after build, it's bundled and I cannot see or change it.
I don't want it to be bundled, so I can change it while my app is working on my host.
or any other suggestion is appreciated.
<script>
import articlesJson from "./../static/articles.json";
export default {
name: "Body",
data() {
return {
articles: articlesJson
};
},
};
</script>
My dist folder after build.
.
├── css
│   ├── app.934f0703.css
│   └── chunk-vendors.e246dba9.css
├── fav.ico
├── img
│   └── profile-photo.446da51d.jpg
├── index.html
└── js
├── app.01988997.js
├── app.01988997.js.map
├── chunk-vendors.3ee1fa24.js
└── chunk-vendors.3ee1fa24.js.map

Answer 1

You should be able to import the data in your json file if you convert it to a .js file and declare and export your json object.
const myObject = { 'property': 'value' }
export default myObject;
Then you should be able to use it like any other module. Alternately you may need a some sort of a json loader... webpack docs
Edit
I just saw that your problem isn't importing the file but updating it. If you want your app to see the up to date version you'll need to reference that file directly rather than importing the module from the bundle. The bundle won't be updated without your repacking/deploying.
I'm not sure how you're serving your app, but in addition to referencing your json file directly, you need to make sure that file is deployed to the server rather than simply hanging out with the rest of your unbundled js which shouldn't be deployed.