The js code does not work when I try to build it with vue. Everything is drawn correctly, but the script does not run, the selected colors do not change. If anything, here's a sandbox with this layout https://codepen.io/Ni55aN/pen/ELGMOy .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-spa</title> </head> <body> <div id="traffic-light"></div> <script src="/dist/build.js"></script> </body> </html> <template> <div id="traffic-light"> <div class="light red" :class="{active: current=='red'}"></div> <div class="light yellow" :class="{active: current=='yellow'}"></div> <div class="light green" :class="{active: current=='green'}"></div> </div> </template> <script> export default { name: 'traffic', data () { return { current: 'red' } } } </script> <style> body { background: linear-gradient(rgb(52, 166, 255), rgb(71, 124, 255)); height: 100vh; } #traffic-light { width: 70px; height: 240px; background: #222; border-radius: 8px; margin: auto; padding: 15px; } .light { display: inline-block; border-radius: 100%; width: 70px; height: 70px; margin-bottom: 8px; opacity: 0.2; transition: opacity 0.2s } .active { opacity: 1; } .red { background: red; } .yellow { background: yellow; } .green { background: green; } </style> import Vue from 'vue' import router from './router' import traffic from './traffic.vue' Vue.config.productionTip = false class State { constructor(name, dur, next){ this.name = name; this.dur = dur; this.next = next; } } class Constroller { trigger(state, callback){ callback(state); setTimeout(()=>{ this.trigger(state.next, callback); }, state.dur * 1000) } } var app = new Vue({ el: '#traffic-light', router, template: '<traffic/>', components: { traffic }, mounted(){ var constroller = new Constroller(); var red = new State('red', 2); var yellowR = new State('yellow', 1); var yellowG = new State('yellow', 1); var green = new State('green', 3); red.next = yellowR; yellowR.next = green; green.next = yellowG; yellowG.next = red; constroller.trigger(red, (state)=>{ this.current = state.name; }); } }) 