<template>
  <div>A</div>
  <div>sharedVar: {{ sharedVar }}</div>
  <button @click="toggleOutside">toggle outside</button>
  <button @click="toggleInside">toggle inside</button>
</template>

<script>
import { useTestState } from '../state';
export default {
  name: 'A',
  setup() {
    const { sharedVar, toggleOutside, toggleInside } = useTestState();

    return {
      sharedVar,
      toggleOutside,
      toggleInside,
    };
  },
};
</script>


<!-- nebo vyvoláme metody driv  za prepokladu ze state.js nebude sharedVar readonly -->

<template>
  <div>A</div>
  <div>sharedVar: {{ sharedVar }}</div>
  <button @click="toggleOutside">toggle outside</button>
  <button @click="toggleInside">toggle inside</button>
  <button @click="x">x</button>
</template>

<script>
import { useTestState } from '../state';
const { sharedVar, toggleOutside, toggleInside } = useTestState();
export default {
  name: 'A',
  setup() {
    return {
      sharedVar,
      toggleOutside,
      toggleInside,
    };
  },
  methods: {
    x() {
      sharedVar.value = !sharedVar.value;
    },
  },
};
</script>