DevExpress trial, DxSparkLine

[Laro88]

How do I perform dynamic databinding in Vue3 to props - data is not validating on props change, however a watch setup is ok.
Navigating and rerendering works fine (except for some x-axis width that seems strange)

I have been messing around with doing a ref of the props, and using all sorts of crazy variations of :data-source="props.vals" etc.
None have resulted in a real time feed.

If you can just tell me how to force a refresh from the ID then this would be doable in the watch function where I log the data.

Btw. It seems like your documentation need a lot of work.

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import DxSparkline, { DxTooltip, } from 'devextreme-vue/sparkline';

const props = defineProps<{
    rkey: string,
    val: number,
    vals: number[],
}>()

function ComputeKeyName(key: string) {
    console.log("Computing the key name for key:" + key);
    return key;
}

let name = "";

const r = ref(props);

  watch(r, (n) => {
     console.log(n.vals); //dump number[] to log - works :-)
 },{ deep: true });

onMounted(() => {
    name = ComputeKeyName(props.rkey);
});
</script> 

<template>
    <td>{{ name }}</td>
    <td>{{ vals[vals.length - 1] }}</td>
    <td>
        <DxSparkline :data-source=r.vals :show-min-max="true" class="sparkline" type="line">
            <DxTooltip :enabled="true" />

        </DxSparkline>
    </td>
</template>

<style scoped>
.rows-content td {
    font-weight: 400;
    width: 200px;
    padding: 25px 10px 5px 10px;
    border: 1px solid #c2c2c2;
}

.rows-content tr:nth-child(2) td {
    border-top: 1px solid #c2c2c2;
}

.rows-content td:first-of-type {
    border-left: 1px solid #c2c2c2;
}

/* .rows-content .sparkline {
    width: 100px;
    height: 40px;
} */

 .sparkline {
    width: 400px;
    height: 30px;
}
</style>