How to dynamically change the name of a called function in a Vue component?

Question

Vue.js

There is a component where there is a handler that calls a function.

Example:

Vue.component('vm-table', {
    props: ['list'],
    template: '<button v-on:click="$root.aaa()">Редактировать</button>'
});

How can I make the name of the called function dynamic, which will be passed from outside, that is, the function is not aaa(), but some other one, which will be passed through the list parameter?
'

Answer 1

v-on:click="$root[list]()"

Answer 2

<template>
  <button @click="edit()">Редактировать</button>
</template>
<script>
export default {
  props: {
    list: {
      type: Object,
      required: true
    }
  },
  methods: {
    edit () {
      if (this.list.functionName === 'aaa') this.$root.aaa()
    }
  }
}
</script>