fix: v-bind object should be overridable with kebab-cased props (#8845)

In addition .sync should generate camelCased event name

Author: Justineo

src/core/instance/render-helpers/bind-object-props.js

@@ -6,7 +6,8 @@ import {
   warn,
   isObject,
   toObject,
-  isReservedAttribute
+  isReservedAttribute,
+  camelize
 } from 'core/util/index'
 
 /**
@@ -43,12 +44,13 @@ export function bindObjectProps (
             ? data.domProps || (data.domProps = {})
             : data.attrs || (data.attrs = {})
         }
-        if (!(key in hash)) {
+        const camelizedKey = camelize(key)
+        if (!(key in hash) && !(camelizedKey in hash)) {
           hash[key] = value[key]
 
           if (isSync) {
             const on = data.on || (data.on = {})
-            on[`update:${key}`] = function ($event) {
+            on[`update:${camelizedKey}`] = function ($event) {
               value[key] = $event
             }
           }

test/unit/features/directives/bind.spec.js

@@ -187,6 +187,26 @@ describe('Directive v-bind', () => {
     }).then(done)
   })
 
+  it('bind object with explicit overrides', () => {
+    const vm = new Vue({
+      template: `<test v-bind="test" data-foo="foo" dataBar="bar"/>`,
+      components: {
+        test: {
+          template: '<div :data-foo="dataFoo" :data-bar="dataBar"></div>',
+          props: ['dataFoo', 'dataBar']
+        }
+      },
+      data: {
+        test: {
+          dataFoo: 'hi',
+          dataBar: 'bye'
+        }
+      }
+    }).$mount()
+    expect(vm.$el.getAttribute('data-foo')).toBe('foo')
+    expect(vm.$el.getAttribute('data-bar')).toBe('bar')
+  })
+
   it('.sync modifier with bind object', done => {
     const vm = new Vue({
       template: `<test v-bind.sync="test"/>`,