Vue + xstate

component.js

new Vue({
  el: "#app",

  mounted() {
    this.state = this.lightMachine.initial;
    setInterval(() => {
      this.state = this.lightMachine.transition(this.state, "TIMER").value;
    }, 3000);
  },

  computed: {
    buttonText() {
      return this.buttonOptions[this.state];
    }
  },

  data() {
    return {
      state: null,
      lightMachine: xstate.Machine({
        key: "light",
        initial: "green",
        states: {
          green: {
            on: {
              TIMER: "yellow"
            }
          },
          yellow: {
            on: {
              TIMER: "red"
            }
          },
          red: {
            on: {
              TIMER: "green"
            }
          }
        }
      }),

      buttonOptions: {
        green: "foo",
        yellow: "bar",
        red: "baz"
      }
    };
  }
});