Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbiBleHBvcnQgZGVmYXVsdHtcbiAgIGRpcmVjdGl2ZXM6IHtcbiAgICBkcmFnOntcbiAgICAgIG1vdW50ZWQoZWwsIGJpbmRpbmcpIHtcbiAgICAgICAgY29uc29sZS5sb2coYmluZGluZy52YWx1ZSkgICAgLy8gdW5kZWZpbmVkXG4gICAgICB9XG4gICAgfVxuICB9LFxuIH1cblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8ZGl2IHYtZHJhZz1cIiRyZWZzLnRlc3RcIj5cbiAgICAgIDxkaXYgcmVmPVwidGVzdFwiIC8+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

Steps to reproduce

look at the console

What is expected?

a div dom

What is actually happening?

undefined

System Info

No response

Any additional comments?

No response

That's expected. The red will be set after the element has been created, but you pass it to the directive long before that happens, during the render phase.