App.tsx

import { action, observable } from 'mobx'
import { observer } from 'mobx-react'
import React, { useContext } from 'react'

class CounterViewModel {
    @observable count: number = 0

    @action.bound public plus() {
        this.count++
    }

    @action.bound public minus() {
        this.count--
    }
}

const CounterViewModelContext = React.createContext(new CounterViewModel())

export function App() {
    return (
        <Counter />
    )
}

const Counter = observer(() => {
    const counter = useContext(CounterViewModelContext)

    return (
        <div>
            <div>{counter.count}</div>
            <button onClick={counter.minus}>-</button>
            <button onClick={counter.plus}>+</button>
        </div>
    )
})