<ComponentSelector :components bind:selectedComponent/> <Editor bind:code='selectedComponent.source' /> <pre> {{compiled}} </pre> <script> import Editor from './Editor.html'; import ComponentSelector from './ComponentSelector.html'; export default { components: { ComponentSelector, Editor }, onstate({ changed, current }) { const { selectedComponent } = this.get(); if (changed.components) { components.forEach(component => { if (component === selectedComponent) return; component.compiled = component.source.toUpperCase(); }); } if (changed.selectedComponent) { selectedComponent.compiled = selectedComponent.source.toUpperCase(); this.updateBundle(); } }, methods: { updateBundle() { const components = this.get('components'); const compiled = components.map(component => component.compiled).join('\n'); this.set({ compiled }); } } } </script>