Declaring JSX / TSX elements in setup, instead of render(), loses reactivity

[davelsan]

Using JSX or TSX we can modularize a component by declaring (somewhat) functional elements in variables. In Vue 2.x this is also possible, but every declared element has to go inside the render function and reactive variables are handled in data or computed, kind of breaking the flow of what I'm trying to accomplish.

Since with this API we kind of declare everything inside setup, I was wondering whether it'd be possible to also declare these modular elements there too, instead of in the returned render function.

I can do something like this and the component renders just fine, but count reactivity is lost:

export default createComponent({
  name: 'App',
  setup () {
    // Declaring <header> and <clicker> in setup kind of
    // helps to functionally group elements and logic
    const count = ref(0);
    const header = (
      <h1>
          Count has been updated { count.value } times
      </h1>
    );

    const clicker = (
      <button
        on-click={
          () => count.value++
        }
      >
        Clicker
      </button>
    );

    // But <header> and <clicker> have to be declared inside
    // the return render, else "count" loses its reactivity?
    return () => {
      // const header = ...
      // const clicker = ...
      return (
        <div id="app">
          { header  }
          { clicker }
        </div>
      );
    }
  },
});

Is there anything I can do here to accomplish this?

Don't know if what I'm asking horribly defiles any good practices standards out there, though...

Maybe somewhat related issues: #59, #64

UPDATE

I should have mentioned, just in case. I used @liximomo's vue-composition-api-tsx-example as the sandbox to run the code I've written above.

That repo installs babel-preset-vca-jsx, which automatically imports createElement as h and compiles the return of setup from JSX to a valid createElement object.

[dvic]

I believe the setup function is run only once? (AFIK it replaces beforeCreate and created)

[davelsan]

Would that mean I'm just returning those elements as static templates?

EDIT

Well, that might explain why if I declare them as arrow functions, then call them inside the return, reactivity works.

export default createComponent({
  name: 'App',
  setup () {
    // declare <header> and <clicker> elements as
    // arrow functions, execute them in the return
    const count = ref(0);
    const header = () => (
      <h1>
          Count has been updated { count.value } times
      </h1>
    );

    const clicker = () => (
      <button
        on-click={
          () => count.value++
        }
      >
        Clicker
      </button>
    );

    return () => {
      // execute header() and clicker() here to
      // retain reactivity
      return (
        <div id="app">
          { header()  }
          { clicker() }
        </div>
      );
    }
  },
});

[dvic]

Yes, that's exactly the reason, I think this is expected behavior.

[davelsan]

Alright. I'm going to leave this open for a day in case someone wants to add to the discussion. Thanks for the help @dvic, at least now I know why it happens and can work around it.