[Vue warn]: The setup binding property "xxx" is already declared.

[mbbbc]

Existing project need to use vue3.0，i add '@vue/composition-api' to my project。 dependencies：

1. "vue": "2.5.22", 2."@vue/composition-api": "^0.3.4", I run the following code and the console prompts me： [Vue warn]: The setup binding property "state" is already declared. [Vue warn]: The setup binding property "increment" is already declared.

   
   <template>
   <button @click="increment">
   Count is: {{ state.count }}, double is: {{ state.double }}
   </button>
   </template>

![1577327135(1)](https://user-images.githubusercontent.com/42057800/71454126-16588b00-27ca-11ea-9d77-22052972b42a.jpg)

[jacekkarczmarczyk]

Works fine in codepen https://codepen.io/jkarczm/pen/RwNgMQj?editors=1010

[posva]

Thanks @jacekkarczmarczyk @mbbbc open a new issue with a repro if you manage to reproduce it and make sure to use the latest version of Vue as well

[chaosst]

open a new issue with a repro if you manage to reproduce it and make sure to use the latest version of Vue as well

if I use mixins to declares a method, then I rewrite this method in my component，and then I get this warning

[irowbin]

Not sure but this bug still appears when doing test by mocking methods.

handler module:

{
   ...
   ...
   return {
      method1
   }
}
export default handlerFn

vue component:

<template>
  <button @clcik="method1"></button>
</template

const { method1 } = handlerFn()

setup(){
return{
   method1
  }
}

test with mock

const spy1 = jest.spyOn(handler, 'method1')
    const w = mount(LoginComponent, {
       mocks: {
        method1: spy1
      }
    })
  expect(spy1).toBeCalled()

The test passes but the warning never goes away.

[Vue warn]: The setup binding property "method1" is already declared.

tested on "@vue/composition-api": "0.5.0", "0.6.7" & "1.0.0-beta.11"

[webrsb]

It happened if I register VueCompositionAPI twice like this:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

const localVue = createLocalVue()
localVue.use(VueCompositionAPI )

const wrapper = mount(Component, {
  localVue
})

Not sure but this bug still appears when doing test by mocking methods.

handler module:

{
   ...
   ...
   return {
      method1
   }
}
export default handlerFn

vue component:

<template>
  <button @clcik="method1"></button>
</template

const { method1 } = handlerFn()

setup(){
return{
   method1
  }
}

test with mock

const spy1 = jest.spyOn(handler, 'method1')
    const w = mount(LoginComponent, {
       mocks: {
        method1: spy1
      }
    })
  expect(spy1).toBeCalled()

The test passes but the warning never goes away.

[Vue warn]: The setup binding property "method1" is already declared.

tested on "@vue/composition-api": "0.5.0", "0.6.7" & "1.0.0-beta.11"

[irowbin]

It happened if I register VueCompositionAPI twice like this:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

const localVue = createLocalVue()
localVue.use(VueCompositionAPI )

const wrapper = mount(Component, {
  localVue
})

Not sure but this bug still appears when doing test by mocking methods. handler module:

{
   ...
   ...
   return {
      method1
   }
}
export default handlerFn

vue component:

<template>
  <button @clcik="method1"></button>
</template

const { method1 } = handlerFn()

setup(){
return{
   method1
  }
}

test with mock

const spy1 = jest.spyOn(handler, 'method1')
    const w = mount(LoginComponent, {
       mocks: {
        method1: spy1
      }
    })
  expect(spy1).toBeCalled()

The test passes but the warning never goes away.

[Vue warn]: The setup binding property "method1" is already declared.

tested on "@vue/composition-api": "0.5.0", "0.6.7" & "1.0.0-beta.11"

@webrsb I only have localVue.use(VueCompositionAPI)

[james2doyle]

Late update. I was having this issue in Nuxt while using the @nuxtjs/composition-api module.

I was using @nuxtjs/composition-api in my component for the router. I was creating a localVue in my test that was calling localVue.use(VueCompositionAPI ).

It looks like, if you are using @nuxtjs/composition-api in your component, you don’t need to add localVue.use(VueCompositionAPI ) to your test.

[Luli92]

Late update. I was having this issue in Nuxt while using the @nuxtjs/composition-api module.

I was using @nuxtjs/composition-api in my component for the router. I was creating a localVue in my test that was calling localVue.use(VueCompositionAPI ).

It looks like, if you are using @nuxtjs/composition-api in your component, you don’t need to add localVue.use(VueCompositionAPI ) to your test.

I'm also using @nuxtjs/composition-api. Recently started migrating to using the composition api from options. So I've got both mapGetters and context.store.getters using the recommended way of getting computed properties from the vuex store.

I got this error when I had duplicate names when I tried to import using composition api when it had a binding set up with mapGettters.

I solved it by using a temporary solution until the entire application is migrated over to use the composition API. I named my composition-imported computed properties with _variableName if I already had it imported with mapGetters using variableName.

Atleast I think that's what caused it , have you encountered anything similar in your app?

[ygj6]

Here: https://github.com/vuejs/composition-api/blob/9566e6363da289951073ac5b29810c0577a64648/src/utils/instance.ts#L14

It seems to be specially designed like this: !(propName in vm)

[dcrabbeYapily]

I'm having this issue too and trying the above didn't solve the issues. The tests pass but I get [Vue warn]: The setup binding property "institutionsListFilter" is already declared.

If I remove the computed value from the wrapper the error goes away but then any tests that check for rendered markup that uses the mock data fail (as its not rendered due to the computed property being empty - I think)

The test setup

import { institutionsListData, applicationId, selectedInstitutions } from '~/TestUtils/testCommon';

let getters: any;
let store: any;
let actions: any;
let wrapper: any;
let propsData: any = {
  applicationId,
};

const wrapperBeforeEach = () => {
  getters = {
    getCountries: () => [],
    getInstitutions: () => [],
    getEnvironment: () => [],
    getApplicationInstitutionIds: () => {
      return [];
    },
    getPaymentFeatures: () => {},
  };
  actions = {
    'application/fetchApplicationInstitutionIds': jest.fn(),
    'institutions/fetchInstitutions': jest.fn(),
    'countries/fetchCountries': jest.fn(),
    'institutions/fetchEnvironment': jest.fn(),
    'institutions/fetchPaymentFeatures': jest.fn(),
  };

  store = new Vuex.Store({
    getters,
    actions,
  });

  wrapper = shallowMount(AddInstitutions, {
    store,
    propsData,
    computed: {
      institutionsListFilter: {
        get() {
          return institutionsListData.institutionsList;
        },
        set(val) {
          return val;
        },
      },
    },
  });
};

the computed value from the component that is giving the error.

    const institutionsListFilter = computed(() => {
      return institutionsList.value.filter(
        (institution: InstitutionState & { selected: boolean }) => {
          institution.selected = false;
          return institution;
        }
      );
    });

[rafaelmagalhaes]

Having similar with @dcrabbeYapily

All of my computed properties return the same error
[Vue warn]: The setup binding property "xxx" is already declared.

[mrgodhani]

I am noticing similar error as well with Pinia + Vue Composition API when using it in jest test along with vue-test-util. Was anyone able to find any solution?

[alexmccabe]

One of my colleagues had this issue and it was because his IDE accidentally auto-imported from this path:

import { defineComponent } from '@vue/composition-api/dist/vue-composition-api';

Make sure that the import is:

import { defineComponent } from '@vue/composition-api';

[victorgarciaesgi]

Having this warning too. So nothing can fix this for now? it's just warnings but on certain CI this can be blocking

[xiaoxiangmoe]

@victorgarciaesgi Can you provide a minimal reproduction?

[victorgarciaesgi]

Yeah i'll try to make one!

[victorgarciaesgi]

With no luck, here is a simple reproduction: https://stackblitz.com/edit/github-uxkoj7-hphrzr?file=package.json

Running npm run test show strange errors like

Remove Pinia, the error is showing now

[victorgarciaesgi]

Ok I resolved the problem by removing localVue.use(vueCompositionApi);. It seems that it takes the Vue instance instead

[lk0606]

Thanks @jacekkarczmarczyk @mbbbc open a new issue with a repro if you manage to reproduce it and make sure to use the latest version of Vue as well

@posva Has the problem been solved yet? What's the solution?

[wweggplant]

@xiaoxiangmoe @ygj6 这里可以复现这个问题 ： https://stackblitz.com/edit/github-uxkoj7-xnak92?file=package.json

@victorgarciaesgi Can you provide a minimal reproduction?

[wweggplant]

@xiaoxiangmoe @ygj6 这里可以复现这个问题 ： https://stackblitz.com/edit/github-uxkoj7-xnak92?file=package.json

@victorgarciaesgi Can you provide a minimal reproduction?

This was resolved by upgrading to vue2.7

[ks221197]

@wweggplant nahh, i am still getting same error with "vue": "^2.7.3", "@vue/composition-api": "^1.7.0",

[alexmccabe]

If you have Vue2.7 installed you don’t need the composition api anymore. All the composables have been backported

https://blog.vuejs.org/posts/vue-2-7-naruto.html

[yihuan]

Any solution on this? It happened to me when I tried to run my application on another machine. Nothing changes, it just doesn't work lol

[yihuan]

It turned out to be that I didn't lock the version, so it must be installed with the latest version(2.7.x), which seems to conflict with @vue/composition-api.

[alexmccabe]

@yihuan yeah we had to lock to 2.6.14 for both Vue and template compiler

[iceprosurface]

It`s hard to migrate from vue2.7.0+ right now. Yeah lock to 2.6.14 is good idea.

[yihuan]

@alexmccabe Yes, lock version is a must if @vue/compositionn-api is used.

@iceprosurface Actually I want to upgrade to Vue 2.7.x so I can remove @vue/composition-api. But I gave up because I need to fix too many ESLint errors for existing project which didn't follow the rules.

[alexmccabe]

I was able to upgrade a project to 2.7 fairly easily, but it's going to be project-by-project whether it's feasible. I would add yourself something to your backlog and get it addressed as soon as possible. Vue 2 is now on Long Term Support and will reach End of Life in 18 months

[Germxu]

Vue 2.7.x is conflict with @vue/composition-api, check your actually Vue version in package lock file. Because component will render duplicate using vue and @vue/composition-api. Remove @vue/composition-api and use Vue 2.7.x is recommended

[Elikar-KM]

Vue 2.7.x is conflict with @vue/composition-api, check your actually Vue version in package lock file. Because component will render duplicate using vue and @vue/composition-api. Remove @vue/composition-api and use Vue 2.7.x is recommended

This answer help me, thanks. i was the same issue.

[JidLaurence]

I found another solution to the problem. See my code below:

<template>
 <div>
    {{test}}
 </div>
</template>

<script setup>
import { computed } from '@vue/composition-api';
let test = computed(() => store.state.test);
</script>

<script>
import store from '@store';

export default {
    components: {},
};
</script>