Untitled

import { VueComponent, Component } from '@fe/types'
import { VNode } from 'vue'
import { MyComponent } from '../../components/my-component/my-component'

import styles from './test.module.css'

@Component()
export default class TestPage extends VueComponent {

	public render(): VNode {
		return (
			<div class={styles.block}>
				<MyComponent topText={'Top text'} />
			</div>
		)
	}
}

import { VueComponent, Component, Prop } from '@fe/types'
import { VNode } from 'vue'
import styles from './my-component.module.css'

interface Props {
	topText: string
}

@Component
export class MyComponent extends VueComponent<Props> {
	@Prop({
		default: 'No Text',
	})
	readonly topText!: Props['topText']

	myData = 'old data'

	changeText() {
		this.myData = 'new data'
	}

	public render(): VNode {
		return (
			<div>
				<div>{this.topText}</div>
				<div>{this.myData}</div>
				<button
					type="button" class={styles.button}
					onClick={() => this.changeText()}
				>
					Время менять надпись
				</button>
			</div>
		)
	}
}