custom directives parse Error

[yangliguo7]

if I have a custom directives like

const app = createApp(App);
app.directive("operate", {
    mounted(el, binding) {
        const { arg, instance, value } = binding;
        console.log(binding);
        const { param } = value || {};
        if (!instance?.[arg]) {
            console.log('not exist ')
            return;
        }
        el.addEventListener('click', instance[arg].bind(instance, param));
    },
})

in my program

<template>
  <button  v-operate:add >button</button>
</template>

<script setup>
const add = () =>{
  console.log('click trigger')
  alert('click trigger')
}
</script>

'add ' is assigned a value but never used no-unused-vars

Should I export this method separately to avoid eslint errors?

like

<script>
export const add = () =>{
  console.log('click trigger')
  alert('click trigger')
}
</script>

Is there another way to avoid this mistake ?

my eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['@vue/airbnb', '@vue/prettier', 'plugin:vue/base'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        jest: true,
      },
    },
  ],
  globals: {
    defineEmits: true,
    defineProps: true,
    defineExpose: true,
  },
};

[ota-meshi]

Thank you for posting the issue.
We probably need to add an option to the script-setup-uses-vars rule.

https://eslint.vuejs.org/rules/script-setup-uses-vars.html

[ota-meshi]

I've tried your source code but it doesn't work in Vue.
Can you provide a sample repository where your custom directives with <script setup> work well?

[ota-meshi]

It doesn't seem to work now due to a bug, but it seems that you essentially need to use defineExpose.
vuejs/core#5018 (comment)

I close this issue as there are no false positives when using defineExpose.

[yangliguo7]

I do know that using defineExpose works in dev , but sometimes I don't want to use it to expose it。 @ota-meshi

[ota-meshi]

I don't know how to get your directive to work without using defineExpose. Please let me know if you know it.

[yangliguo7]

hi~~
in vue@3.0.0，If I use setup, I get my directive to work without using defineExpose

<template>
  <button @click="clickA">A</button>
  <button v-operate:clickB>B</button>
</template>
<script setup>
const clickA =  () =>{
  alert("1")
}
const clickB =  () =>{
  alert("2")
}

</script>

@ota-meshi