[Vuejs]-Method is not defined on the instance but referenced during render in a .vue file

You didn’t define it inside methods.

Move it there and that should fix it.

import PageNav from '@/components/PageNav.vue';
import PageFooter from '@/components/PageFooter.vue';

export default {
  name: 'Groups',
  components: {
    PageNav,
    PageFooter,
  },
  data() {
    return {
      groups: [],
      error: '',
    };
  },
  methods: {
    fetchGroups() {
      const url = 'http://localhost:3000/groups';
      this.groups = [];
      fetch(url)
        .then((response) => {
          if (response.status === 200) {
            return response.json();
          }
          throw new Error(`Meh, error! Status ${response.status}`);
        })
        .then((groups) => {
          this.groups = groups;
        })
        .catch((error) => {
          this.error = error;
        });
    },
    removeGroup(groupId) {
      const url = `http://localhost:3000/groups/${groupId}`;
      fetch(url, {
        method: 'DELETE',
      })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .catch((error) => {
          this.error = error;
        });
    },
   Add() {
    const inputName = document.getElementById('groepnaam');
    const group = { id: this.groups.length + 1, name: inputName.value };
    if (inputName.value === '') {
      window.alert('Vul een naam in!');
    } else {
      fetch('http://localhost:3000/groups',
        {
          method: 'POST',
          body: JSON.stringify(group),
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(() => {
          this.groups = [];
          this.fetchGroups();
        })
        .then((response) => {
          if (response.status === 201) {
            return response.json();
          }
          throw new Error();
        });
    }
   }
  },
  created() {
    this.fetchGroups();
  },
};