Issue with component after upgrading to Nuxt v3.8.0

[mild hemlock]

Hi,

After upgrading to Nuxt v3.8.0 I now get this strange error, this is what it displays on screen. But nothing is appearing in my logs.

500
[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/StyledSelect.vue

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    modelValue: object | string | number | null;
    small?: boolean;
    xSmall?: boolean;
  }>(),
  {
    disabled: false,
    small: false,
    xSmall: false
  }
);

const emit = defineEmits<{
  (e: 'update:modelValue', value: object | string | number | null): void;
}>();

const v = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value);
  }
});
</script>

<template>
  <select
    v-model="v"
    :disabled="disabled"
    :class="[
      'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',
      {
        'form-select': !small,
        'form-select-small': small,
        'form-select-x-small': xSmall,
        'opacity-50': disabled
      }
    ]" data-v-inspector="components/StyledSelect.vue:29:3"
  >
    <slot />
  </select>
</template>

<style scoped>
.styled-select {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23999999'><polygon points='0,0 100,0 50,50'/></svg>")
    no-repeat;
  background-size: 10px;
  background-position: calc(100% - 10px) 65%;
  background-repeat: no-repeat;
  background-color: #efefef;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
</style>

Here is my reproduction repo (https://github.com/TheFlyer1983/nuxt-issue).

Does anyone have any ideas what is causing this?

[noble vale]

I think you can remove the v-model="v" from the select since the select is in the root of the component.

[mild hemlock]

But how do I then pass my value to the select?

I removed that, now my value isn't being emitted back up

[noble vale]

Appears to be an issue with vite-node (so on ssr). You could make it a client only component.
I tested and the following also works:

 <select :value="modelValue" @input="(e) => emit('update:modelValue', (e.target as HTMLSelectElement).value)"
    :disabled="disabled" :class="[
      'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',
      {
        'form-select': !small,
        'form-select-small': small,
        'form-select-x-small': xSmall,
        'opacity-50': disabled
      }
    ]">
    <slot />
  </select>

[mild hemlock]

Thank you very much. That is working fine now. I changed my Nuxt config to have ssr: false,, so everything is client side rendered, which I what I want really.