Why aren't Vue prop changes triggering reactivity in my bundled component?

I've been troubleshooting this issue for a while now and I'm running out of ideas. I hope some fresh eyes can give me a better perspective.

In short: I have several computed properties in a component that are not reacting to changes in props only after bundling. Before bundling, the computed properties work exactly as expected.

Here's the relevant bits of code. For context, this is part of a paginated data table component.

setup(props) {
    props = reactive(props);
   
    const isNextDisabled = computed(() => props.index + props.pageSize >= props.totalSize

    const rangeUpperBound = computed(() => {
        let upperBound = props.index + props.pageSize;
        if (upperBound > props.totalSize) {
            upperBound = props.totalSize;
        }
        return upperBound;
    });

    return {
        isNextDisabled,
        upperBound,
    }
}

I'm using Storybook.js to develop this component as part of a library. I'm also trying to simulate async data fetching, so my props are initially null values and then I have a setTimeout function that loads some data from a file after 1.5 seconds. In other words, my props are definitely being updated and I expect my computed properties to be evaluated twice (once at first render, again when the props they depend on are updated).

When I'm developing the components with the vanilla npm run storybook command everything works as expected. All the computed properties are updated properly once the timeout finishes, and the component renders correctly. I hit snags when I bundle my components.

I'm using Vue CLI's default configuration to bundle things, my command is:

vue-cli-service build --target lib --name copper-vue src/index.js

Here is that src/index.js file:

export { default as DataTable } from "./components/DataTable/DataTable";

Here's my problem: When I use the component from the bundled file none of the computed properties in my component are updated when the props are updated after the setTimeout. I've verified with logging statements and a debugger that the computed properties are only evaluated once when the component first renders, and they seem to completely ignore the fact that the props they depend on have updated. I've also verified this happens with a watchEffect call I added during my testing.

I've been testing this by importing the bundled component, rather than the component from my .vue file, in my Storybook story like so:

// Shortcut story in question:

<template>
  <span>This story waits 1.5 seconds before it loads any data, as a rudimentary way to simulate async data fetching.</span>
  <data-table
    :data="dataSubset"
    :columns="columns"
    @editRow="handleEditRow"
    paginate
    :index="index"
    :page-size="pageSize"
    :total-size="totalSize"
    @change-page="getNewPage"
    @change-page-size="changePageSize"
  />
</template>

<script>
// This is the import to use the component from the SFC
// import DataTable  from "./DataTable.vue";

// Here's how I import the component from the bundled file which causes issues
import { DataTable } from "../../../dist/copper-vue.common";

...
</script>

Other relevant details:

• This bug happens in both Chrome and Firefox
• I'm using Vue 3.2.8, Storybook 6.3.12
• Running/bundling on a 2020 M1 Macbook pro

Things I might try next:

• Walking back some Vue versions to see if 3.1 works, 3.0 works, etc

Is there something about the reactive APIs that I'm doing incorrectly here? I'm completely baffled why things work as expected when running in a "dev" mode and not when bundled using Vue CLI. Any tips are appreciated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW