diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 41d95bb58421..fd4b4e4a04d0 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -230,6 +230,8 @@ export default function dom ( parsed, source, options, names ) {
 	let i = generator.renderers.length;
 	while ( i-- ) builders.main.addBlock( generator.renderers[i] );
 
+	builders.init.addLine( `this._torndown = false;` );
+
 	if ( parsed.css && options.css !== false ) {
 		builders.init.addLine( `if ( !addedCss ) addCss();` );
 	}
@@ -334,6 +336,7 @@ export default function dom ( parsed, source, options, names ) {
 			this._fragment = null;
 
 			this._state = {};
+			this._torndown = true;
 		};
 	` );
 
diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js
index 7d162bfab000..b6adbde6309c 100644
--- a/src/generators/dom/visitors/attributes/binding/index.js
+++ b/src/generators/dom/visitors/attributes/binding/index.js
@@ -88,6 +88,7 @@ export default function createBinding ( generator, node, attribute, current, loc
 			var ${local.name}_updating = false;
 
 			component._bindings.push( function () {
+				if ( ${local.name}._torndown ) return;
 				${local.name}.observe( '${attribute.name}', function ( value ) {
 					${local.name}_updating = true;
 					${setter}
diff --git a/test/generator/component-binding-conditional-b/Bar.html b/test/generator/component-binding-conditional-b/Bar.html
new file mode 100644
index 000000000000..062ba1a9543b
--- /dev/null
+++ b/test/generator/component-binding-conditional-b/Bar.html
@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional-b/Baz.html b/test/generator/component-binding-conditional-b/Baz.html
new file mode 100644
index 000000000000..836ecc80ce53
--- /dev/null
+++ b/test/generator/component-binding-conditional-b/Baz.html
@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional-b/Foo.html b/test/generator/component-binding-conditional-b/Foo.html
new file mode 100644
index 000000000000..7cf8a718ca9e
--- /dev/null
+++ b/test/generator/component-binding-conditional-b/Foo.html
@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional-b/_config.js b/test/generator/component-binding-conditional-b/_config.js
new file mode 100644
index 000000000000..3853390b1620
--- /dev/null
+++ b/test/generator/component-binding-conditional-b/_config.js
@@ -0,0 +1,24 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	// This test fails, because the Bar y binding is activated before the
+	// Baz x binding, meaning that by the time Foo is created, we already
+	// have a value for y which Foo won't override. Easily worked around,
+	// probably impossible to 'fix', so this test is left here for info
+	// purposes but will probably remain skipped indefinitely.
+	skip: true,
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};
diff --git a/test/generator/component-binding-conditional-b/main.html b/test/generator/component-binding-conditional-b/main.html
new file mode 100644
index 000000000000..6c1324065762
--- /dev/null
+++ b/test/generator/component-binding-conditional-b/main.html
@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+<Baz bind:x/>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>
diff --git a/test/generator/component-binding-conditional/Bar.html b/test/generator/component-binding-conditional/Bar.html
new file mode 100644
index 000000000000..062ba1a9543b
--- /dev/null
+++ b/test/generator/component-binding-conditional/Bar.html
@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional/Baz.html b/test/generator/component-binding-conditional/Baz.html
new file mode 100644
index 000000000000..836ecc80ce53
--- /dev/null
+++ b/test/generator/component-binding-conditional/Baz.html
@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional/Foo.html b/test/generator/component-binding-conditional/Foo.html
new file mode 100644
index 000000000000..7cf8a718ca9e
--- /dev/null
+++ b/test/generator/component-binding-conditional/Foo.html
@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>
diff --git a/test/generator/component-binding-conditional/_config.js b/test/generator/component-binding-conditional/_config.js
new file mode 100644
index 000000000000..89512afa7a05
--- /dev/null
+++ b/test/generator/component-binding-conditional/_config.js
@@ -0,0 +1,17 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};
diff --git a/test/generator/component-binding-conditional/main.html b/test/generator/component-binding-conditional/main.html
new file mode 100644
index 000000000000..c8872b4f3254
--- /dev/null
+++ b/test/generator/component-binding-conditional/main.html
@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<Baz bind:x/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>