How to use the serializr.serializable function in serializr

import {observable} from 'mobx';
import {identifier, reference, serializable} from 'serializr';
import {v4 as uuid} from 'uuid';
import {StaticState} from '../StaticState';
import {HeirloomType, ItemInfo, ItemType} from './ItemInfo';
import {IStatsSource, Stats} from './Stats';
import {cmp} from '../../lib/Helpers';

export type ItemId = string;

export class Item implements IStatsSource {
  @serializable(identifier()) id: ItemId = uuid();
  @serializable @observable level: number = 1;

  @serializable(reference(ItemInfo, StaticState.lookup((i) => i.items)))
  info: ItemInfo;

  get name () { return this.info.name; }
  statsSourceName: string = 'Item';

  get statsScale () {
    const maxItemLevel = StaticState.instance.getUpgradeEffects(['blacksmith']).level;
    return 1 + ((this.level - 1) / maxItemLevel);
  }

  get stats () {
    const scaledStats = new Stats();
    scaledStats.add(this.info.stats);

@observable
  estateEvent = nullEstateEvent;

  @serializable(list(object(Hero)))
  @observable
  coach: Hero[] = [];

  @serializable(list(object(Hero)))
  @observable
  roster: Hero[] = [];

  @serializable(list(object(Hero)))
  @observable
  graveyard: Hero[] = [];

  @serializable(list(object(Quest)))
  @observable
  quests: Quest[] = [];

  @serializable(list(object(Item)))
  @observable
  items: Item[] = [];

  @serializable(list(object(Dungeon)))
  @observable
  allDungeons: Dungeon[] = [];

  @serializable(list(reference(BuildingUpgradeInfo, StaticState.lookup((i) => i.buildingUpgrades))))
  @observable
  buildingUpgrades: BuildingUpgradeInfo[] = [];

  @computed get selectableDungeons () {

import {identifier, serializable} from 'serializr';
import {CharacterTemplate} from './CharacterTemplate';

export class DungeonInfo {
  @serializable(identifier()) id: string;
  name: string;
  monsters: CharacterTemplate[] = [];
  imageUrl: string;
  entranceImageUrl: string;
  roomImageUrls: string[] = [];
  isStartingDungeon: boolean;
}