App.vue

<script type="text/jsx">
import { reactive, toRefs, defineComponent } from "vue";

const App = defineComponent({
  setup() {
    const form = reactive({
      username: "",
      password: ""
    })

    const formToRefs = toRefs(form)

    return () => (
        <>
          <DynamicInput
              placeholder="Username"
              model={formToRefs.username}
              styles={{ padding: "10px", backgroundColor: "#111", color: "#fff", fontWeight: "bold" }}
          />
          <p>Model: {formToRefs.username.value}</p>
          <DynamicInput
              placeholder="Password"
              type="password"
              model={formToRefs.password}
              styles={{ padding: "10px", backgroundColor: "#222", color: "#fff", fontWeight: "bold" }}
          />
          <p>Model: {formToRefs.password.value}</p>
        </>
    );
  },
});
export default App

const DynamicInput = ({model, placeholder, styles, type = "text"}) => (
    <input style={styles} type={type} placeholder={placeholder} v-model={model.value} />
)
</script>