Vite integration with vanilla js reloads the entire page

Questions
1

I have this vite config using ‘rollup-plugin-framework7’. But every time i make on dev it reloads the entire page instead of just the component I updated. Is this a normal behaviour or my configuration is wrong somewhere?

export default async () => {

  return  {
    plugins: [
      framework7({ emitCss: false }),
      createHtmlPlugin({
        minify: false,
        inject: {
          data: {
            TARGET: process.env.TARGET,
          },
        },
      }),
    ],
    root: SRC_DIR,
    base: '',
    publicDir: PUBLIC_DIR,
    build: {
      outDir: BUILD_DIR,
      assetsInlineLimit: 0,
      emptyOutDir: true,
      rollupOptions: {
        treeshake: false,
      },
    },
    resolve: {
      alias: {
        '@': SRC_DIR,
      },
    },
    server: {
      host: true,
    },
    esbuild: {
      jsxFactory: '$jsx',
      jsxFragment: '"Fragment"',
    },
  };
}
2

I have my routes like this

import HomePage from '../pages/home.f7';
import DiscoverPage from '../pages/discover.f7';
import {singleMedia} from "@/components/media.js";

const routes = [
  {
    path: '/',
    keepAlive: true,
    component: HomePage,
  },
  {
    path: '/discover/',
    keepAlive: true,
    component: DiscoverPage,
  },
  {
    path: "/movie/:media_id",
    async: singleMedia,
  },