Devtools only show props and DOM refs, not data

[dombarnes]

I have a vite-based project (part of a Dotnet core project) and when working in development, I run yarn vite build --mode development to build development assets (since trying to use the dev server with a Dotnet project is more headache than I care to deal with).
I'm using SFC's and mounting them with vanilla JS (based on some data-component and data-props attributes on my cshtml files), rather than doing a full SPA.
When I open the DevTools in Chrome or Brave, I only see props and some DOM refs (where I need to attach something directly to a DOM element).

I'm not sure why this is happening. Maybe just a result of building development assets to disk versus using the devserver?

/** @type {import('vite').Config} */
// https://blogs.taiga.nl/martijn/2021/02/24/integrating-vite-with-asp-net-core-a-winning-combination/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import eslint from 'vite-plugin-eslint'
import SvgLoader from 'vite-svg-loader'
import mkcert from 'vite-plugin-mkcert'
// import ViteCommonJS from 'vite-plugin-commonjs'
import { VitePWA } from 'vite-plugin-pwa'
import FullReload from 'vite-plugin-full-reload'
import ViteRestart from 'vite-plugin-restart'
import { entrypoints } from './vite.entrypoints.js'
import { manifestIcons } from './manifest-icons.js'
const autoprefixer = require('autoprefixer')
const tailwindcss = require('tailwindcss')


const path = require('path')

export default defineConfig(({ command, mode }) => {
  console.log(`Running in ${command} mode for ${mode}`)
  return {
    // base: '/vite-dev/',
    base: command === 'serve' ? '/vite/' : '/',
    build: {
      // target: 'es2015',
      emptyOutDir: false,
      manifest: true,
      minify: mode === 'development' ? false : 'esbuild',
      outDir: '../../wwwroot/',
      rollupOptions: {
        input: entrypoints,
        output: {
          assetFileNames: mode === 'development' ? 'css/[name].css' : 'css/[name]-[hash:8].min.css',
          chunkFileNames: 'js/[name].js',
          entryFileNames: mode === 'development' ? 'js/[name].js' : 'js/[name]-[hash:8].min.js',
          format: 'es'
        }
      },
      sourcemap: mode === 'development' ? true : false,
    },
    css: {
      // postcss: './postcss.config.js',
      // postcss: {
      //   plugins: [
      //     // require('postcss-import'),
      //     require('postcss-nesting'),
      //     require('tailwindcss/nesting'),
      //     require('tailwindcss'),
      //     require('autoprefixer')
      //   ]
      // },
      devSourcemap: true
    },
    clearScreen: false,
    plugins: [
      mkcert(),
      VitePWA({
        registerType: 'autoUpdate',
        // includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
        manifest: {
          name: 'Portal',
          short_name: 'Portal',
          display: 'standalone',
          id: 'uk.co.trilbytv.portal',
          start_url: './',
          background_color: '#49aea3',
          theme_color: '#000000',
          icons: manifestIcons
        },
        injectRegister: 'inline',
        workbox: {
          globPatterns: ['**/*.{js,css,ico,png,svg}'],
          navigateFallback: null // don't try and fallback to index.html
        }
      }),
      // ViteCommonJS(),
      FullReload(['Views/**/*'], 300),
      ViteRestart({
        restart: ['../../vite.config.js']
      }),
      SvgLoader(),
      vue({
        // __VUE_PROD_DEVTOOLS__: mode === 'development' ? true : false,
        template: {
          transformAssetUrls: {
            includeAbsolute: false
          },
          compilerOptions: {
            isCustomElement: (tag) =>
              ['health-donut', 'healthscore', 'loading-bar', 'encoder-item'].includes(tag)
          }
        }
      })
      // eslint()
    ],
    publicDir: false,
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './assets/src'),
        'vueSrc': path.resolve(__dirname, './assets/src/vue')
      }
    },
    root: './assets/src',
    server: {
      watch: { disableGlobbing: false },
      port: 5173,
      hmr: {
        host: 'localhost',
        clientPort: 5173,
        https: true,
        // protocol: 'wss',
        watch: {
          disableGlobbing: false
          // globPatterns: ['.**/*.{js,vue,scss}']
        }
      },
      https: true,
      proxy: {
        '/systems': {
          target: 'https://127.0.0.1:44303/systems',
          secure: false,
          logLevel: 'debug'
        },
        '/css/*': {
          target: 'https://127.0.0.1:5173/vite/css',
          secure: false,
          logLevel: 'debug'
        },
        '/js/*': {
          target: 'https://127.0.0.1:5173/vite/js',
          secure: false,
          logLevel: 'debug'
        },
        '/': {
          target: 'https://127.0.0.1:44303/', // this must be the same port as in IIS express
          // the below configuration is needed for windows auth
          changeOrigin: true,
          secure: false,
          logLevel: 'debug',
          ws: true,
          onProxyRes: (proxyRes) => {
            let key = 'www-authenticate'
            proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(',')
          }
        }
      }
    }
  }
})

And yes, I may be a little bit crazy with this setup!

[dombarnes]

Solved. Doesn't work because the devtools don't work unless running off vite dev server. Doesn't work fully with compiled assets