<script setup lang="ts">
import { BehaviorSubject, interval, map, startWith, scan } from "rxjs";
import { onMounted, onUnmounted, watch } from "vue";
import { useSubject, useObservable } from "@vueuse/rxjs";

const countSubject = new BehaviorSubject(0);
const count = useSubject(countSubject);

const count2 = useObservable(
	interval(1000).pipe(
		map(() => 1),
		startWith(0),
		scan((total, next) => next + total)
	)
);

onMounted(() => {
	watch(count, value => console.info("from watcher:", value));

	const subscription = countSubject.subscribe(value => console.info("from subscriber: ", value));
	onUnmounted(() => {
		subscription.unsubscribe();
	});
});
</script>

<template>
	<button class="btn-fill px-4 py-2 rounded-lg" @click="count++">count is: {{ count }}</button>
	<button class="btn-fill px-4 py-2 rounded-lg">count is: {{ count2 }}</button>
</template>
