function counter() {
	return {
		count: 0
	}
}

function counterObserver() {
	return {
		total: 0,
		alpines: [],
		observer: null,
		start() {
			// Use an ID or another selector to focus on the components you want to ignore
			// Parent components can't be ignored though, so you might want additional logic
			// to ensure you have the correct components
			this.alpines = document.querySelectorAll('[x-data]:not(#alpine-watcher)')
			this.observer = new MutationObserver(mutations => {
				// Everytime a mutation occurs we can run a function
				this.updateTotalCount()
			})
			// Each Alpine needs to be observed separately
			this.alpines && this.wrapAlpines()
		},
		wrapAlpines() {
			this.alpines.forEach(alpine => {
				this.observer.observe(alpine, {
					attributes: true,
					childList: true,
					subtree: true,
				})
			})
		},
		updateTotalCount() {
			// Refresh the Alpine components and grab the data
			this.alpines = document.querySelectorAll('[x-data]:not(#alpine-watcher)')
			this.total = Array.from(this.alpines).map(alpine => {
				// This is an internal method where we can get the data.
				// Just be warned that this functionality could change
				// inside Alpine without notice
				return alpine.__x.getUnobservedData().count
				// We're filtering out 'undefined' values, specifically
				// the components that don't have 'count'
			}).filter(Boolean).reduce((a, b) => a + b, 0)
		},
	}
}