If you are developing multiple components in Vue, you might be facing the situation that you have the following folder structure:

.
└── src/
    └── components/
        ├── utils/
        │   └── some_cool_functions.js
        ├── component_a.vue
        └── component_b.vue
$ cat some_cool_functions.js
export function function_b(id) {
  console.log("Do some stuff in function a " + id)
}

export function function_b(id) {
  console.log("Do some stuff in function b " + id)
}
<template>
  <div>
    ....
    <v-btn @click="function_a(item.id)" color="error">Some Button for Function A</v-btn>
    <v-btn @click="function_b(item.id)" color="error">Some Button for Function B</v-btn>
  </div>
</template>

<script>
import { function_a, function_b } from './functions/some_cool_functions.js'

export default {
  components: {
  },
  setup() {
  },

  data() {
    return {
      some_value: ''
    };
  },
  methods: {
    function_a, // <-- add this
    function_b, 
  }
}
</script>

Then you have a button in component_a.vue which would like use the function from utils script. Then you need to do the following:

  1. Import the functions
  2. Add the functions to the method section