I'm using Laravel with Vue JS. Most of the time, I use npm run watch than other commands.
While I modify contents in my VUE template, I've to press Ctrl+Shift+R or hard refresh to actually see the modified content in the browser.
Another alternative I can do is checking "Disable cache" in Developer Tool (Network > Disable Cache)
Is it meant to be worked like that or are there any sort of steps to run without hitting hard refresh.
Browsers will cache assets by default. This is to prevent the need to re-download the assets (javascript, css, etc) on every page load. Hard refreshing will force re-downloading of said assets. To prevent this, you need to enable some form of "cache busting", which essentially appends a unique hash to said files, thus forcing the browser to re-download them without the need for a user to clear their cache or to force a refresh.
Laravel mix includes this feature and can be enabled in the webpack.mix.js file.
For example, inside your webpack.mix.js file:
mix.js('resources/js/app.js', 'public/js')
.version();
Then, when importing in your blade view, make sure you use the mix helper:
<script src="{{ mix('/js/app.js') }}"></script>
You can find more information about versioning / cache busting here: https://laravel.com/docs/7.x/mix#versioning-and-cache-busting