mw.loader.using( [ 'vue', 'pinia' ], ( require ) => {
	const vue = require( 'vue' );
	// vue-demi fix, uncomment to enable
	/*
	vue.set = function ( target, key, val ) {
		if ( Array.isArray( target ) ) {
			target.length = Math.max( target.length, key );
			target.splice( key, 1, val );
			return val;
		}
		target[ key ] = val;
		return val;
	};

	vue.del = function ( target, key ) {
		if ( Array.isArray( target ) ) {
			target.splice( key, 1 );
			return;
		}
		delete target[ key ];
	};
	*/

	const pinia = require( 'pinia' );

	const useCounter = pinia.defineStore( 'counter', () => {
		const count = vue.ref( 0 );
		const increment = () => count.value++;
		return { count, increment };
	} );

	const app = vue.createMwApp( {
		setup() {
			const counter = useCounter();

			return () => vue.h( 'button', { onClick: () => counter.increment() }, [
				'Count: ',
				counter.count,
			] );
		},
	} );

	app.use( pinia.createPinia() );
	app.mount( '#app' );

	const hot = {
		data: {},
	};
	const hmr = pinia.acceptHMRUpdate( useCounter, hot );

	$( '<button>Trigger HMR</button>' ).one( 'click', () => {
		hmr( {
			useCounter: pinia.defineStore( 'counter', () => {
				const count = vue.ref( 0 );
				const increment = () => ( count.value += 2 );
				return { count, increment };
			} ),
		} );
	} ).insertAfter( '#app' );
} );