JSFiddle - React, Tailwind, and code Playground

by helloworld

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="my-vue" class="demo">
  <banner :class="{ 'even-banner': isEven, 'odd-banner': !isEven }"></banner>
  <hr />
  <content :class="{ 'even-content': isEven, 'odd-content': !isEven }"></content>
  <pre>value={{value}} isEven={{isEven}}</pre>
</div>

CSS

.even-banner {
  background-color:navy;
  color: #fff;
}

.even-content {
  background-color:blue;
  color: #fff;
}

.odd-banner {
  background-color:maroon;
  color:#fff;
}

.odd-content {
  background-color:red;
  color:#fff;
}

JavaScript

const store = {
  state: Vue.reactive({
    result: null
  }),
  generateNewValue() {
    this.state.result = Math.floor(Math.random() * 10);
  }
};

const MyApp = {
  setup() {
    const isEven = Vue.computed(() => store.state.result % 2 === 0)
    const value = Vue.toRef(store.state, 'result')
    return {
      isEven,
      value
    }
  }
}
const myApp = Vue.createApp(MyApp)

myApp.component("banner", 
  { 
    template: '<button @click="onGenerateClick">generate</button>',
    setup(props) {
      console.log('setting up...');
    },
    methods: {
      onGenerateClick() {
        store.generateNewValue();
      }
    }
  }
);

myApp.component("content", {
  template: '<div><span>Content</span><button @click="onGenerateClick">generate</button></div>',
  methods: {
    onGenerateClick() {
      store.generateNewValue();
    }
  }  
});

myApp.mount('#my-vue')