v-bind with .sync modifier and Vue template interpolation/type checking gives TypeScript error

[andrewisaburden]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Problem

If vetur.experimental.templateInterpolationService: true, and using a v-bind with .sync modifier, TypeScript reports:

Property 'item' is missing in type '{ "item.sync": string; }' but required in type '{ item: string; }'

Reproducible Case

<template>
    <SomeComponent :item.sync="item" />
</template>

SomeComponent.vue:

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    item: String,
  }
});
</script>

I have a fix, and will make a PR shortly.

It is caused by v-bind and v-on modifiers being appended in the same manner (originally to prevent duplicates causing errors from v-on chained modifiers). v-bind modifiers should always be culled from the node name, because we cannot bind one Vue prop twice (duplicates for v-bind are an error), and so that we aren't trying to find a prop with name "item.sync" rather than "item".