How to use the vue-typed.Options function in vue-typed

import * as Vue from 'vue'
import { Options, Watch } from 'vue-typed';
import { _ButtonBase, _ButtonEvents } from './_base';
import { IButton } from '../../../../lib/interface'

@Options({
	// template: '<button type="button" class="ui button"></button>'
})
export class Button extends _ButtonBase implements IButton {

	target(): JQuery {
		return $(this.$el)
	}

	loading(state: boolean): JQuery {
		let target = this.target()
		if (state)
			return target.addClass('loading')
		return target.removeClass('loading')
	}

import * as Vue from 'vue'
import { Options, Prop } from 'vue-typed'
import { _FormBase, _FormEvents } from './_base';
import { IForm } from '../../../../lib/interface';

@Options()
export class Form extends _FormBase implements IForm {

	target() : JQuery {
		return $(this.$el)
	}

	mounted() {

		var self = this
		var opt = {
			onSuccess: function () {
				self.$emit(_FormEvents.success)
			},
			onFailure: function (formErrors, fields) {
				self.$emit(_FormEvents.error, formErrors, fields)
			},

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Button extends Virtual() {

	status: string = 'Click some buttons test Aha'
	counter: number = 0;
	disabled: boolean = true

	setDisable() {
		alert('I disable my self')
		this.disabled = true
	}

	updateStatus(status) {
		this.counter++;
		this.status = status + ' ' + this.counter + ' times';

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Alert extends Virtual() {

	sample1() {
		this.$ui.alert("Here's a message!")
	}

	sample2() {
		this.$ui.alert("Here's a message!", "It's pretty, isn't it?")
	}

	sample3() {
		this.$ui.alert("Good job!", "You clicked the button!", "success")
	}

import * as Vue from 'vue'
import { Options, Prop, Watch } from 'vue-typed';
import { _TabBase } from './_base';
import { ITab } from '../../../../lib/interface'

@Options({
	template: `<div>
		<div>
			
			<a class="item">
  			{{i.caption}}
			</a>
			
		</div>
		
	</div>`
})
export class Tab extends _TabBase implements ITab {
		
	changeTab(path: string) {
		return $(this.$el).find('.item').tab('change tab', path);
	}

import { IHeader } from '../../../../lib/interface';

abstract class HeaderBase extends _HeaderBase implements IHeader {
	preRender(ch, tag, sub?) {
		var css = sub ? 'sub' : 'ui';
		return ch(tag, {
			'class': css + ' header'
		}, this.$slots['default']);
	}

	target(): JQuery {
		return $(this.$el)
	}
}

@Options()
export class Header extends HeaderBase {
	render(ch) {
		return this.preRender(ch, 'div')
	}
}
@Options()
export class SubHeader extends HeaderBase {
	render(ch) {
		return this.preRender(ch, 'div', true)
	}
}
@Options()
export class H1 extends HeaderBase {
	render(ch) {
		return this.preRender(ch, 'h1')
	}

import { Options } from 'vue-typed';

@Options({
	template: require('./view.pug')()
})
export class Radio {

	foo = 0

	fruits = ['Mango', 'Durian', 'Apple', 'Orange']

	fruit = 'Durian'

}

import * as Vue from 'vue'
import { Options, Prop } from 'vue-typed';
import { _RadioBase } from './_base';
import { IRadio } from '../../../../lib/interface';

@Options({
	template: `
	<div class="field">
		<div class="ui radio checkbox">
			<input class="hidden" type="radio">
			<label></label>
		</div>
	</div>
	`
})
export class Radio extends _RadioBase implements IRadio {

	target(): JQuery {
		return $(this.$el).find('.ui.radio')
	}

	mounted() {

import { Options } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Dropdown extends Vue {

	choosen = 'first'

	selection: string[] = ['Mango', 'Durian']

	fruits = ['Mango', 'Durian', 'Apple', 'Orange']

	allowEdit = true

	selectedItemChanged() {
		this.$ui.toast.info("Selected item change to " + this.choosen)
	}

import { Options, Watch } from 'vue-typed';
import { Util } from '../../../utils';
import { _DropdownBase, _DropdownEvents } from './_base';
import { IDropdown } from '../../../../lib/interface';
import * as _ from 'lodash';


@Options()
export class Dropdown extends _DropdownBase implements IDropdown {

	selectedItems = undefined
	_htmlItems = ''

	target(): JQuery {
		return $(this.$el.querySelector('.ui.dropdown'))
	}

	createComponent(ch) {
		return ch('div', { 'class': 'ui selection dropdown ' + this.css }, [
			ch('input', { attrs: { type: 'hidden', name: this.name } }),
			ch('i', { 'class': 'dropdown icon' }),
			ch('div', { 'class': 'default text' }, this.placeholder),
			ch('div', { 'class': 'menu', 'ref': 'menu' }, this.$slots['default'])
		])