app_vue2/components/Ui/Button/Submit.vue

<template>
  <v-btn class="mr-4 ot_green ot_white--text" :class="otherActions ? 'pr-0' : ''" @click="onClick(mainAction)" ref="mainBtn">
    {{ $t(mainAction) }}

    <v-divider class="ml-3" vertical v-if="otherActions"></v-divider>

    <v-menu
      :top="dropDirection==='top'"
      offset-y
      left
      v-if="otherActions"
      :nudge-top="dropDirection==='top' ? 6 : 0"
      :nudge-bottom="dropDirection==='bottom' ? 6 : 0"
    >
      <template #activator="{ on, attrs }">
        <v-toolbar-title v-on="on">
          <v-icon class="pl-3 pr-3">
            {{ dropDirection==='top' ? 'fa-caret-up' : 'fa-caret-down'}}
          </v-icon>
        </v-toolbar-title>
      </template>
      <v-list
        :min-width="menuSize"
      >
        <v-list-item
          dense
          v-for="(action, index) in actions"
          :key="index"
          class="subAction"
          v-if="index > 0"
        >
          <v-list-item-title v-text="$t(action)" @click="onClick(action)" />
        </v-list-item>
      </v-list>
    </v-menu>
  </v-btn>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, ref, Ref} from "@nuxtjs/composition-api";
import {$useForm} from "~/composables/form/useForm";

export default defineComponent({
  props: {
    actions: {
      type: Array,
      required: true
    },
    dropDirection: {
      type: String,
      required: false,
      default:'bottom'
    }
  },

  setup(props, {emit}) {
    const mainBtn:Ref<any> = ref(null)
    const menuSize = computed(()=>{
      //Btn size + 40px de padding
      return mainBtn.value?.$el.clientWidth + 40
    })

    const onClick = (action: string) => {
      emit('submit', action)
    }


    const mainAction:ComputedRef<any> = computed(()=>{
      return props.actions[0] as string
    })

    const otherActions:ComputedRef<boolean> = computed(()=>{
      return props.actions.length > 1
    })

    return{
      mainBtn,
      menuSize,
      onClick,
      mainAction,
      otherActions
    }

  }
})
</script>

<style scoped>
.v-list-item--dense{
  min-height: 25px;
}
.subAction{
  cursor: pointer;
}
</style>