Field: slots.default() should be called in render

[psgoss]

Overview of the problem

Oruga version: 0.8.5
Vuejs version: 3.4.21
OS/Browser: Windows 10 / Chrome

Description

When using the OField component, I get the following warning:

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 

This is causing issues with trying to use a bound value for the message and variant properties to show validation errors.

Steps to reproduce

Here's an example component:

<script setup>
import { ref } from 'vue'

const variant = ref(null)
const message = ref(null)

function onClick() {
  variant.value = 'danger'
  message.value = 'This is an error'
}
</script>

<template>
  <o-field
    label="Input"
    horizontal
    :variant="variant"
    :message="message">
    <o-input :maxlength="200" />
  </o-field>

  <o-button @click="onClick">
    Click Me!
  </o-button>
</template>

Expected behavior

When clicking the button, the message should appear below the input and the variant should be applied.

Actual behavior

The warning appears in the console as soon as the component is rendered.

The message appears, and the variant icon appears in the field. But the message text and field border are not getting updated with the variant styling.

If setting variant to a static string value, then the UI appears as you would expect.

[mk-startialab]

I had the same problem and had prepared an environment for inspection.
https://stackblitz.com/edit/vitejs-vite-spyfnj

[mlmoravek]

The unchanged variant class was an unknown bug, thanks for spotting this. (see #834)

The "Vue warning" is a known issue that occurs when moving from the option api to the composition api. The `addons' feature of the OField component needs to check the default slot children. This is done by creating the slot from the template in a function.

oruga/packages/oruga/src/components/field/Field.vue

Line 202 in 9693d7c

const slot = slots.default();

This was a working behaviour in the options api. However, it is not a good implementation for the composition api.
I think the template of OField needs to be refactored and changed so that a template ref can be used instead to fix this.