Emitting two different methods from a custom button component

Question

I'm actually new to VueJS and my question is how can I emit two different methods (Like Add and Remove) from my custom button component ?

I actually did search but couldn't find any; but on reading Vue's doc I found out the .native event modifier which says that on using it, we listen for native DOM events instead of the ones that are emitted from the Vue component.

When I tried it out it worked great. I could have just stayed with that but willing to learn I wanted to know if it could be possible to emit different methods from a custom component.

Thanks

This is my Button.vue custom component

<template>
  <nuxt-link
    v-if="to"
    :to="to"
    :class="[
      buttonCheck,
      buttonWidth ? 'w-' + buttonWidth : 'w-48',
      buttonStyles.container
    ]"
  >
    <div class="text">
      <p :class="buttonStyles.paragraph">
        <slot></slot>
      </p>
    </div>
  </nuxt-link>
  <component
    v-else
    :is="setButtonType"
    :class="[
      buttonCheck,
      buttonWidth ? 'w-' + buttonWidth : 'w-48',
      buttonStyles.container
    ]"
  >
    <div class="text">
      <p :class="buttonStyles.paragraph">
        <slot></slot>
      </p>
    </div>
  </component>
</template>

<script>
import { Fragment } from "vue-fragment";
export default {
  props: {
    buttonType: {
      type: String,
      default: "a"
    },
    to: {
      type: String,
      default: ""
    },
    buttonColor: {
      type: String
    },
    buttonWidth: {
      type: String
    }
  },
  data() {
    return {
      setButtonType: this.buttonType,
    };
  }
};
</script>

Then I had this component Line.vue where I called my Button

<template>
  <div class="mt-3">
    <label
      for="project_title"
      class="block leading-5 pt-1 text-grey-700 font-poppins tracking-wider uppercase font-bold text-xs"
      >{{ label }}</label
    >
    <div
      v-for="input in inputs"
      :key="input.value"
      class="flex mt-2"
      @mouseover="hover = input.value"
      @mouseleave="hover = null"
    >
      <Input
        name="project_advantage"
        :value="input.value"
        :placeholder="placeHolder"
        type="text"
        noLabel
      />
      <Button
        buttonType="button"
        @click.native="emitRemove"
        buttonWidth="32"
        :class="['ml-3', hover === input.value ? 'opacity-100' : 'opacity-0']"
        >Delete</Button
      >
    </div>
    <Button
      buttonType="button"
      @click.native="emitAdd"
      buttonWidth="32"
      class="mt-3"
      >Add</Button
    >
  </div>
</template>

<script>
import Button from "~/components/shared/Button";
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    inputs: {
      type: Array,
      required: true
    },
    placeHolder: {
      type: String,
      required: false
    }
  },
  components: {
    Button
  },
  data() {
    return {
      hover: null
    };
  },
  methods: {
    emitAdd() {
      this.$emit('addLine')
    },
    emitRemove() {
      this.$emit('removeLine')
    }
  }
};
</script>

<style></style>

And finally the Target.vue component where I actually implement those functions

<template>
  <span>
    <div class="w-full">
      <h2
        class="mt-0 text-sols font-hind text-lg xl:text-2xl font-normal leading-snug"
      >
        .......
      </h2>
    </div>

    <div class="hidden w-full sm:block">
      <div class="py-5">
        <div class="border-t border-gray-200"></div>
      </div>
    </div>

    <div class="my-4">
      <MultiLineTextInput
      @addLine="addLine"
      :inputs="project.wsl"
      />
      <MultiLineTextInput
       @removeLine="removeLine"
      :inputs="project.requirements"
      />
    </div>
  </span>
</template>

<script>
import Button from "~/components/shared/Button";
import MultiLineTextInput from "~/components/form/MultiLineTextInput";
export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  components: {
    Button,
    MultiLineTextInput
  },
  methods: {
    addLine() {
      alert("Added Line")
    },
    removeLine() {
      alert("Remove Line")
    }
  },
  data() {
    return {
      hover: false
    };
  }
};
</script>

<style></style>