How to use the mobx.observable function in mobx

test('mobx state should not be collect by vue', () => {

	class ObservableModel {
		@observable name = '';
	}

	const prop = (value: string): any => () => {
		return {
			configurable: true,
			get() {
				return value;
			},
		};
	};

	const model1 = observable({ xx: 10 });

	class Model {
	}

	@Observer
	@Component
	class App extends Vue {

		@prop('kuitos')
		name!: string;

		model = new Model();
		om = new ObservableModel();
		om1 = model1;
		age = 10;

it('does not views alive when using static + string rendering', function() {
    useStaticRendering(true);

    let renderCount = 0;
    const data = mobx.observable({
      z: 'hi'
    });

    const TestComponent = observer(function testComponent() {
      renderCount++;
      return <div>{data.z}</div>;
    });

    const output = renderToStaticMarkup();

    data.z = 'hello';

    expect(output).toBe('<div>hi</div>');
    expect(renderCount).toBe(1);

    expect(getDNode(data, 'z').observers.length).toBe(0);

function watchHistory(oids: string[] | undefined) {
    const history: IActivityLogEntry[] = observable([]);

    const targetId = activityLogStore.watch(
        {
            createObject(activityLogEntry: IActivityLogEntry) {
                action(() => history.push(activityLogEntry))();
            },

            updateObject(changes: Partial) {
                const entry = history.find(entry => entry.id === changes.id);
                if (entry) {
                    action(() => (entry.message = changes.message!))();
                } else {
                    console.error("log entry not found");
                }
            },

const valueHandler = (snapshot) => {
				const snapshotVal = snapshot.exportVal();
				const dotPath = path.split('/').join('.');
				if(snapshotVal){
					this.map.set(dotPath, snapshotVal);
				}else{
					this.map.remove(dotPath);
				}
				this.setPathIsLoading(path, false);
			};

			this.setPathIsLoading(path, true);
			const ref = this.database.ref(this.toAbsolutePath(path));
			ref.on('value', valueHandler);

			listener = observable({
				listeners: 1,
				destroy: () => {
					ref.off('value', valueHandler);
				}
			});

			this.listeners.set(path, listener);
		}


		return () => {
			listener.listeners--;
			if(!listener.listeners){
				listener.destroy();
				this.listeners.set(path);
			}

export const confirmIconUrl = require(
  '../assets/dd/images/campaign/town/buildings/hero_activity/hero_activity.confirm_button.png'
);

export const cancelIconUrl = require(
  '../assets/dd/images/campaign/town/buildings/hero_activity/hero_activity.cancel_button.png'
);

@observer
export class Icon extends React.Component {
  static defaultProps = {
    scale: 1,
    highlight: IconHighlightType.Opacity
  };

  hoverState = observable(false);

  render () {
    const customSize = this.props.size !== undefined ? this.props.size : undefined;
    const customWidth = this.props.width !== undefined ? this.props.width : customSize;
    const customHeight = this.props.height !== undefined ? this.props.height : customSize;

    const dynamicIconStyle = {
      backgroundImage: this.props.src ? `url(${this.props.src})` : undefined,
      transform: this.props.scale !== 1 ? `scale(${this.props.scale})` : undefined,
      transformOrigin: '50% 100%',
      width: customWidth,
      height: customHeight
    };

    let hoverLineColor = 'transparent';
    switch (this.props.highlight) {

import SearchInputView from './SearchInputView.jsx';
import _ from 'lodash';

class SearchResult {
  @observable result = null;
  videos = {};
  frames = {};
  labelers = {};
  dataset = '';
  type = '';
  count = 0;
  labeler_colors = ["#db57b9", "#b9db57", "#57db5f", "#db5784", "#dbc957", "#57b9db", "#57db94", "#c957db", "#5f57db", "#db5f57", "#db9457", "#9457db", "#5784db", "#84db57", "#57dbc9"];
  gender_colors = {'M': '#50c9f8', 'F': '#ff6d86', 'U': '#c0ff00'};
};

window.DATASET = observable(GLOBALS.selected);

@observer
export default class Home extends React.Component {
  state = { clickedBox: null }

  constructor(props) {
    super(props);
    window.search_result = new SearchResult();
  }

  _onSearch = (results) => {
    window.search_result.videos = results.videos;
    window.search_result.frames = results.frames;
    window.search_result.labelers = results.labelers;
    window.search_result.dataset = results.dataset;
    window.search_result.count = results.count;

import { observable, runInAction } from 'mobx';
import * as service from '../service';
import { connections } from './connection';

class Profiles {
  public data = observable(new Array());

  public async add(profile: Profile) {
    await service
      .getRPC()
      .call('/profile/add', {
        data: profile,
      })
      .then(() => {
        runInAction(() => {
          this.data.push(profile);
        });
      });
  }

  public async update(name: string, profile: Profile) {
    await service

(parent: { [key: string]: any }, key: string, path: string[]) => {
        if (isObservable(parent[key])) {
          return parent[key]
        } else if (isObject(parent[key])) {
          return observable(parent[key])
        }

        return parent[key]
      }
    )

function oba(data, ele) {
    const o = observable(data)

    autorun(() => {
        JSON.stringify(o)
        if (ele._isInstalled) {
            updateList.push(ele)
            cancelIdleCallback(idleId)
            idleId = requestIdleCallback(backgroundTask)

        }
    })

    ele.data = o
}