I'm trying to use the composition api in a vue 2 module. When I initially created the npm module in the options api, I haven't experienced any issues and the module was installed and utilised accordingly. However, when I try to convert it to the composition api, I keep getting an error stating 'ref is not defined', after I install the npm module. From what I can understand, I must have something missing in the rollup config, but I can't really understand what as I'm fairly new to this.

Usually I would import ref in a component with the following code: import {ref} from '@vue/composition-api'; For this case however, it doesn't cut it.

My rollup config file looks like this:

import commonjs from '@rollup/plugin-commonjs';
import vue from 'rollup-plugin-vue'; 
import buble from '@rollup/plugin-buble';
import scss from 'rollup-plugin-scss';

export default {
    external: ['vue', '@vue/composition-api'],
    input: 'src/index.js',
    output: {
        name: 'BasicDropdown',
        exports: 'named',
        format: 'cjs',
        globals: {
            vue: 'vue',
            compositionApi: '@vue/composition-api',
        }
    },
    plugins: [
        scss(),
        vue({
            css: true,
            compileTemplate: true,
            scss: true,
            preprocessStyles: true
        }),
        commonjs(),
        buble(), 
    ],
};

I also tried using @rollup/plugin-node-resolve, but this also didn't work.

Can someone kindly explain what I should do to import the ref functions from the vue composition api?

EDIT: The error message I'm getting is [Vue warn]: Error in data(): "ReferenceError: ref is not defined"