B3014

A template uses v-on (or @) or v-model on a server component. Server components render on the server only and ship no JavaScript for themselves, so they never emit events and cannot update a v-model binding. The listener is never called.

This warning is reported unless experimental.templateDiagnostics is disabled. @error is not reported: a server component emits error when it fails to load.

Resolution

Render the interactive part on the client. You can pair the server component with a .client.vue component of the same name, render an interactive child with the nuxt-client attribute (with experimental.componentIslands.selectiveClient enabled), or move the listener to a client component that wraps the server component.

<template>
  <div>
    <!-- rendered on the server, then hydrated on the client -->
    <CounterButton nuxt-client />
  </div>
</template>