NativeScript-Vue - Components not refreshing but app.js does - nativescript

Question

having a really strange issue where components that are imported into app.js, do not refresh/reload when changes are made to them, but changes made to app.js are reflected in the simulator and my phone.
So if I change something in the navigation component, nothing happens. If i change the ActionBar title, the change is reflected but the first change made in navigation is still not.
That only takes effect if I reload the whole project.
<template>
<Page>
<ActionBar title="Welcome to the Shop"/>
<GridLayout columns="*" rows="*">
<Label class="message" :text="msg" col="0" row="0"/>
<navigation></navigation>
</GridLayout>
</Page>
</template>
<script>
import navigation from '#/components/navigation/Master.vue';
export default {
components: {
'navigation': navigation
},
data() {
return {
msg: 'Hello World! This is Big D.'
}
}
}
</script>

Answer 1

Actually Webpack used to watch for those changes in Nativescript and it hasn't become matured in re rendering the native elements. I face this problem often too! And I observed that this used to happen for people whose tutorials i used to watch even.
And if u add or remove any files at ur applications, u need to delete the platform folder and run the tns run command.
But I would recommend u to use Sidekick as it used HMR, it works better than the normal tns cli. It's lot more comfortable to use. here's the link SideKick