Constructor and Instance API

/**
 * Vue 2-style constructor for creating component instances
 * @param options - Component options object
 * @returns Legacy component instance with Vue 2 API
 */
new Vue(options?: ComponentOptions): LegacyPublicInstance;

interface ComponentOptions {
  /** Reactive data factory function */
  data?(): Record<string, any>;
  /** Component props definition */
  props?: string[] | Record<string, any>;
  /** Computed properties */
  computed?: Record<string, any>;
  /** Component methods */
  methods?: Record<string, Function>;
  /** Watchers for reactive data */
  watch?: Record<string, any>;
  /** Template string for rendering */
  template?: string;
  /** Render function */
  render?: Function;
  /** Per-component compatibility configuration */
  compatConfig?: CompatConfig;
  
  // Lifecycle hooks
  created?(): void;
  mounted?(): void;
  updated?(): void;
  destroyed?(): void;
  beforeDestroy?(): void;
}

import Vue from "@vue/compat";

const app = new Vue({
  data() {
    return {
      count: 0,
      message: "Hello World"
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <p>Count: {{ count }} (Double: {{ doubleCount }})</p>
      <button @click="increment">Increment</button>
    </div>
  `
});

app.$mount("#app");

interface LegacyPublicInstance extends ComponentPublicInstance {
  /** Reactively set a property on target object */
  $set<T, K extends keyof T>(target: T, key: K, value: T[K]): void;
  /** Reactively delete a property from target object */
  $delete<T, K extends keyof T>(target: T, key: K): void;
  /** Mount the component to a DOM element */
  $mount(el?: string | Element): this;
  /** Destroy the component instance */
  $destroy(): void;
  /** Legacy scoped slots object */
  $scopedSlots: Slots;
  /** Add event listener */
  $on(event: string | string[], fn: Function): this;
  /** Add one-time event listener */
  $once(event: string, fn: Function): this;
  /** Remove event listener */
  $off(event?: string | string[], fn?: Function): this;
  /** Array of child component instances */
  $children: LegacyPublicInstance[];
  /** Object containing event listeners */
  $listeners: Record<string, Function | Function[]>;
}

/**
 * Reactively set a property on target object
 * @param target - Target object to modify
 * @param key - Property key to set
 * @param value - Value to assign to the property
 */
$set<T, K extends keyof T>(target: T, key: K, value: T[K]): void;

// In a component method
this.$set(this.user, 'newProperty', 'newValue');

/**
 * Reactively delete a property from target object
 * @param target - Target object to modify
 * @param key - Property key to delete
 */
$delete<T, K extends keyof T>(target: T, key: K): void;

/**
 * Mount the component to a DOM element
 * @param el - CSS selector string or DOM element
 * @returns The component instance for chaining
 */
$mount(el?: string | Element): this;

/**
 * Destroy the component instance
 * Note: In compat mode, only supported on root instance
 */
$destroy(): void;

/**
 * Add event listener to component instance
 * @param event - Event name or array of event names
 * @param fn - Callback function
 * @returns The component instance for chaining
 */
$on(event: string | string[], fn: Function): this;

/**
 * Add one-time event listener
 * @param event - Event name
 * @param fn - Callback function
 * @returns The component instance for chaining
 */
$once(event: string, fn: Function): this;

/**
 * Remove event listener from component instance
 * @param event - Optional event name to remove
 * @param fn - Optional specific callback to remove
 * @returns The component instance for chaining
 */
$off(event?: string | string[], fn?: Function): this;

/**
 * Array of child component instances
 * @deprecated Use refs or provide/inject instead
 */
$children: LegacyPublicInstance[];

/**
 * Object containing event listeners from parent
 * @deprecated Use emits and v-on in Vue 3
 */
$listeners: Record<string, Function | Function[]>;

/**
 * Legacy scoped slots object
 * @deprecated Use $slots in Vue 3
 */
$scopedSlots: Slots;

interface ComponentOptions {
  /** Called after instance is created */
  created?(): void;
  /** Called after component is mounted to DOM */
  mounted?(): void;
  /** Called after component data changes */
  updated?(): void;
  /** Called before component is destroyed */
  beforeDestroy?(): void;
  /** Called after component is destroyed */
  destroyed?(): void;
}

interface ComponentOptions {
  /** Per-component compatibility configuration */
  compatConfig?: CompatConfig;
}

export default {
  compatConfig: {
    MODE: 3, // Use Vue 3 mode for this component
    INSTANCE_LISTENERS: false, // Disable $listeners warning
  },
  data() {
    return { count: 0 };
  },
  created() {
    console.log("Component created");
  },
  mounted() {
    console.log("Component mounted");
  },
  beforeDestroy() {
    console.log("Component will be destroyed");
  }
};