Почему счетчик не перерисовывается react mobx?

Question

[alaskafx]

import React from "react";
import './App.css';
import store from './store';
import { observer } from "mobx-react-lite";

const App = () => {

    const handle = () => {
        store.increment();
        console.log('wrap');
    };

    return (
        <>
            <p>счетчик так: {store.count}</p>
            <button onClick={handle}>+</button>
        </>
    );
};

export default observer(App);

import { observable, action, computed } from 'mobx';

class CounterStore {
    @observable count = 0;

    @action increment() {
        this.count++;
    }

    @action decrement() {
        this.count--;
    }

    @computed get isPositive() {
        return this.count > 0;
    }

    @computed get countNew(){
        return this.count
    }
}

export default new CounterStore();

при нажатии на кнопку мой счетчик не изменяется, а остаётся равным нулю
Как это решить?

Answer 1

[Alexandroppolus]

Нынче всё немного поменялось, и без makeObservable в конструкторе не взлетит.
https://mobx.js.org/observable-state.html
речение о декораторах можно ещё глянуть тут https://mobx.js.org/enabling-decorators.html