vueuse composables does not work in lib mode vite (vue 3) - vuejs3

Question

I am trying build a vue 3 components library. Everything works fine. However I realized that the vueuse composables do not work when I try to use the library. This my first time writing a library. Is there any wrong with my code? Is there anything extra I need to do?. this my code, package.json and vite.config.ts. Any help will be much appreciated.
// code
setup(props, { slots }) {
const isLargeScreen = useMediaQuery("(min-width: 1024px)");
watch(
isLargeScreen,
(val) => {
console.log(val) //does not work;
}
);
return ()=><div>Hello world</div>
}
//package.json
{
"name": "my-lib",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"#popperjs/core": "^2.11.5",
"#vitejs/plugin-vue-jsx": "^2.0.0",
"#vueuse/core": "^8.9.4",
"vue": "^3.2.37"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.0.0",
"typescript": "^4.6.4",
"vite": "^3.0.0",
"vite-plugin-dts": "^1.3.0",
"vite-plugin-windicss": "^1.8.7",
"vue-tsc": "^0.38.4",
"windicss": "^3.5.6"
},
"files": [
"dist"
],
"module": "./dist/my-lib.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": "./dist/my-lib.mjs"
},
"./dist/style.css": "./dist/style.css"
}
}
// vite.config.ts
import { defineConfig } from "vite";
import { fileURLToPath, URL } from "url";
import { resolve } from "path";
import vue from "#vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import WindiCSS from "vite-plugin-windicss";
import vueJsx from "#vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS(),
vueJsx({}),
dts({
insertTypesEntry: true,
}),
],
esbuild: {
jsxFactory: "h",
jsxFragment: "Fragment",
},
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
lib: {
entry: resolve(__dirname, "src/main.ts"),
name: "MyLib",
fileName: "my-lib",
},
rollupOptions: {
external: ["vue", "#vueuse/core"],
output: {
globals: {
vue: "Vue",
"#vueuse/core": "VueCore",
},
},
},
},
});