Vue Methods

Vue Methods: Defining Handlers and Functions in Script Setup

Vue methods are functions inside your component that handle user actions, update reactive state, or trigger network requests. In Vue 3 <script setup>, methods are simply regular JavaScript functions declared at the top level.

Unlike the legacy Options API, <script setup> removes the methods object and this binding completely. You read and update refs directly inside normal functions, which makes refactoring and TypeScript checking much cleaner.

flowchart TD
    Template["User Click or Submit"] --> Method["Script Setup Function"]
    Method --> Mutation["Update Reactive Refs"]
    Method --> Effect["Run API or Side Effect"]

Methods vs Computed Properties

• Use Methods for actions that happen when events fire, such as adding items, submitting forms, or deleting records.
• Use Computed Properties for derived values displayed in the template, because computed values cache results until dependencies change.

Practical Method Handler SFC Example

This task list component declares addItem and removeItem inside <script setup> and binds both functions to template events.

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

const items = ref(['Vue 3', 'Vite', 'Pinia']);
const newItem = ref('');

function addItem() {
  const trimmed = newItem.value.trim();
  if (!trimmed) return;

  items.value.push(trimmed);
  newItem.value = '';
}

function removeItem(index) {
  items.value.splice(index, 1);
}
</script>

<template>
  <div class="list-manager">
    <div class="input-row">
      <input
        v-model="newItem"
        @keyup.enter="addItem"
        placeholder="Add technology..."
      />
      <button @click="addItem">Add</button>
    </div>

    <ul>
      <li v-for="(item, index) in items" :key="item">
        <span>{{ item }}</span>
        <button @click="removeItem(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

Common Mistakes

• Calling Expensive Functions in Mustache Expressions: Calling {{ formatHeavyList() }} inside <template> re-runs that function on every component re-render. Move pure calculations into computed() instead.
• Using Arrow Functions in Options API: If you maintain older Options API code, never define methods with arrow functions because arrow functions lose access to this. In <script setup>, both function declarations and arrow functions work fine.
• Forgetting .value Inside Functions: Methods inside <script setup> must mutate items.value, not items, to keep reactivity working.

Frequently Asked Questions

Can methods in <script setup> be async?

Yes. You can write async function fetchUsers() inside <script setup> and bind @click="fetchUsers" directly in the template.

Can I extract shared methods into another file?

Yes. Move reusable functions and reactive state into a composable file like composables/useItems.js and import them into any component.

Do I need to return methods from <script setup>?

No. Every top-level function declared inside <script setup> is exposed to the <template> automatically at compile time.