Methods

Declare functions in script setup

Plain functions work as methods.

<script setup>
import { ref } from "vue";

const name = ref("Ada");

function shout() {
  name.value = name.value.toUpperCase();
}
</script>

<template>
  <p>{{ name }}</p>
  <button type="button" @click="shout">Shout</button>
</template>

Pass arguments

Call with parentheses when you need parameters.

<button type="button" @click="remove(id)">Remove</button>

Keep methods focused

One clear action per function. Heavy data transforms often belong in computed properties.

Options API note

In Options API, methods live under a methods: { ... } object and use this.