[V3] - Not rendering slot content in Vue2.7 when using <script setup>

[datWeazel]

What happened?

I'm currently rewriting old Vue2 components using the new <script setup>-syntax (to prepare an update to Vue3 in the future). I noticed that <slot/> content doesn't render for <validation-observer> components.

The following snippet only outputs "Hello World" and the first input field. Everything between the <validation-observer>-Tags doesn't render.

The problem started after rewriting the <script>-Block of my component to the <script setup>-Syntax.

    HELLO
    <input type="text" placeholder="Test 1"></input>
    <validation-observer>
      TEST
      <input type="text" placeholder="Test 2"></input>
    </validation-observer>
    WORLD

Reproduction steps

1. Create basic component in Vue2.7 using <script setup>-syntax.
2. Add <validation-observer>-element to <template>-block
3. Content between the opening and closing tags of the observer won't be rendered.

Version

Vue.js 2.x and vee-validate 3.x

What browsers are you seeing the problem on?

• [X] Firefox
• [X] Chrome
• [X] Safari
• [X] Microsoft Edge

Relevant log output

No response

Demo link

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[datWeazel]

I noticed that this only applies to the validation observer. <validation-provider> works fine but obviously behaves different so I need the <validation-observer>.

[logaretm]

Can you create an example for this? I just tried a 2.7.8 installation and it works fine against the snippet provided.

[datWeazel]

Found the problem in my code. I still don't know the root cause but this is what caused the validation-observer not to render:

Before my rewrite the component was something like this:

<template>
  <div>
    <validation-observer ref="observer" tag="div" v-slot="{ invalid }">
       <div class="row">
        SOME CONTENT
      </div>
    </validation-observer>
  </div>
</template>
<script lang="ts">
(...)
@Ref("observer")
validationObserver!: ProviderInstance & HTMLElement;
(...)
myFunc(){
validationObserver.validate();
}
</script>

Now after rewriting to

<template>
  <div>
    <validation-observer ref="validationObserver" tag="div" v-slot="{ invalid }">
       <div class="row">
        SOME CONTENT
      </div>
    </validation-observer>
  </div>
</template>
<script setup lang="ts">
(...)
const validationObserver = ref<ProviderInstance | null>(null);
(...)
function myFunc(){
validationObserver.value.validate();
}
</script>

Notice how I changed the "ref"-Attribute of the observer to match the variable name. After that the component didn't render correctly anymore. I then changed ref="validationObserver" to ref="validationObserverRef"and the variable to const validationObserverRef = ref<ProviderInstance | null>(null); and now the component renders again the way it should.

As I don't really understand what underlying problem is. Maybe it's the fact that my ref name was the same as the component name?! (validationObserver vs. ValidationObserver) Anyway I don't think the issue is with vee-validate but rather some weird naming conflict I caused by not being careful with naming my variables :D