diff --git a/src/generators/Generator.js b/src/generators/Generator.js
index 995c39dd23..6737f1f99a 100644
--- a/src/generators/Generator.js
+++ b/src/generators/Generator.js
@@ -46,7 +46,7 @@ export default class Generator {
 		const { contextDependencies, contexts, indexes } = this.current;
 
 		walk( expression, {
-			enter ( node, parent ) {
+			enter ( node, parent, key ) {
 				if ( isReference( node, parent ) ) {
 					const { name } = flattenReference( node );
 
@@ -69,6 +69,14 @@ export default class Generator {
 					}
 
 					else {
+						// handle shorthand properties
+						if ( parent && parent.type === 'Property' && parent.shorthand ) {
+							if ( key === 'key' ) {
+								code.appendLeft( node.start, `${name}: ` );
+								return;
+							}
+						}
+
 						if ( globalWhitelist[ name ] ) {
 							code.prependRight( node.start, `( '${name}' in root ? root.` );
 							code.appendLeft( node.object.end, ` : ${name} )` );
diff --git a/test/generator/destructuring/_config.js b/test/generator/destructuring/_config.js
new file mode 100644
index 0000000000..f8a46d1810
--- /dev/null
+++ b/test/generator/destructuring/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `<button>click me</button>`,
+
+	data: {
+		foo: 42
+	},
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'click' );
+		const button = target.querySelector( 'button' );
+
+		let count = 0;
+		let number = null;
+
+		component.on( 'foo', obj => {
+			count++;
+			number = obj.foo;
+		});
+
+		button.dispatchEvent( event );
+
+		assert.equal( count, 1 );
+		assert.equal( number, 42 );
+
+		component.teardown();
+	}
+};
\ No newline at end of file
diff --git a/test/generator/destructuring/main.html b/test/generator/destructuring/main.html
new file mode 100644
index 0000000000..5d98aaae1e
--- /dev/null
+++ b/test/generator/destructuring/main.html
@@ -0,0 +1 @@
+<button on:click='fire("foo", { foo })'>click me</button>
\ No newline at end of file