Overview

This plugin seems to intentionally correct variable names in the ref object if they are covered by key names of other objects.

example:

<script setup>
const listeners = computed(() => ({ input: handleInput, }))
const input = ref(null); // renamed to input2
</script>

However, the variable name modification is not done on the template side, so the ties are broken.

<script setup>
const listeners = computed(() => ({ input: handleInput, }))
const input = ref(null); // renamed to input2
</script>

<template>
  <!-- not renamed -->
  <input ref="input" v-on="listeners"">
</template>

This does not seem to happen in Vue3 (variable names are not modified).

Expected behavior

As with Vue3, no intentional variable name modification is performed. However, I am not aware of how this feature was implemented so I am missing that consideration. Thanks.

Sample

Reproducible code can be found below.

https://github.com/ushironoko/unplugin-vue2-script-setup-not-renamed-template-ref

deps:

  "dependencies": {
    "vue": "^2.6.12"
  },
  "devDependencies": {
    "@vue/composition-api": "1.4.6",
    "@vue/runtime-dom": "^3.2.33",
    "typescript": "^4.5.4",
    "unplugin-vue2-script-setup": "0.10.2",
    "vite": "^2.9.2",
    "vite-plugin-vue2": "1.9.3",
    "vue-template-compiler": "2.6.14"
  }